kriscarle/.babelrc

## .babelrc
{
  "presets": [
    "next/babel",
    "stage-0"
  ],
  "plugins": [
    "transform-decorators-legacy",
    [
      "import",
      {
        "libraryName": "antd",
        "style": false
      }
    ]
  ]
}

## README.md

      
    Raw
  

              README.md
            
          
    Example config to support less theming of Ant Design in Next.js

  
## _document.js
import React from 'react'
import Document, { Head, Main, NextScript } from 'next/document'

import { createHash } from 'crypto'
import { readFileSync } from 'fs'

let version = ''
if (process.env.NODE_ENV === 'production') {
  const hash = createHash('sha256')
  hash.update(readFileSync(`${process.cwd()}/.next/static/style.css`))
  version = `?v=${hash.digest('hex').substr(0, 8)}`
}

export default class MyDocument extends Document {
  render () {
    return (
      <html>
        <Head>
          <link rel='stylesheet' href={`/_next/static/style.css${version}`} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

## homepage.js
import React from 'react'
import {} from 'antd' //import antd components
import '../style.less'

function Home () {
  return (
    <div>
    This is the home page, put Ant Design components in here
    </div>
  )
}

export default Home

## next.config.js
const withLess = require('@zeit/next-less')

module.exports = withLess({
  webpack (config) {
    // attempt at getting less 3.x to work (reverted to less 2.x for now)
    /*
    config.module.rules.forEach((rule) => {
      if (rule.use && Array.isArray(rule.use) && rule.use[0] === 'extracted-loader') {
        const lessLoader = rule.use[rule.use.length - 1]
        if (lessLoader.loader === 'less-loader') {
          lessLoader.options = {
            javascriptEnabled: true,
            compress: true
          }
        } else {
          console.error('less-loader patch failed')
        }
      }
    })
    */
    return config
  }
})

## package.json
{
  "dependencies": {
    "@zeit/next-less": "^0.1.2",
    "antd": "3.1.3",
    "babel-plugin-import": "^1.6.3",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "less": "2.7.3",
    "next": "^5.0.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }
}

## style.less
@import "./node_modules/antd/dist/antd.less";
@import "./theme.less";

## theme.less
@primary-color: green;
	{
	"presets": [
	"next/babel",
	"stage-0"
	],
	"plugins": [
	"transform-decorators-legacy",
	[
	"import",
	{
	"libraryName": "antd",
	"style": false
	}
	]
	]
	}
	import React from 'react'
	import Document, { Head, Main, NextScript } from 'next/document'

	import { createHash } from 'crypto'
	import { readFileSync } from 'fs'

	let version = ''
	if (process.env.NODE_ENV === 'production') {
	const hash = createHash('sha256')
	hash.update(readFileSync(`${process.cwd()}/.next/static/style.css`))
	version = `?v=${hash.digest('hex').substr(0, 8)}`
	}

	export default class MyDocument extends Document {
	render () {
	return (
	<html>
	<Head>
	<link rel='stylesheet' href={`/_next/static/style.css${version}`} />
	</Head>
	<body>
	<Main />
	<NextScript />
	</body>
	</html>
	)
	}
	}
	import React from 'react'
	import {} from 'antd' //import antd components
	import '../style.less'

	function Home () {
	return (
	<div>
	This is the home page, put Ant Design components in here
	</div>
	)
	}

	export default Home
	const withLess = require('@zeit/next-less')

	module.exports = withLess({
	webpack (config) {
	// attempt at getting less 3.x to work (reverted to less 2.x for now)
	/*
	config.module.rules.forEach((rule) => {
	if (rule.use && Array.isArray(rule.use) && rule.use[0] === 'extracted-loader') {
	const lessLoader = rule.use[rule.use.length - 1]
	if (lessLoader.loader === 'less-loader') {
	lessLoader.options = {
	javascriptEnabled: true,
	compress: true
	}
	} else {
	console.error('less-loader patch failed')
	}
	}
	})
	*/
	return config
	}
	})
	{
	"dependencies": {
	"@zeit/next-less": "^0.1.2",
	"antd": "3.1.3",
	"babel-plugin-import": "^1.6.3",
	"babel-plugin-transform-decorators-legacy": "^1.3.4",
	"babel-preset-stage-0": "^6.24.1",
	"babel-register": "^6.26.0",
	"less": "2.7.3",
	"next": "^5.0.0",
	"react": "^16.2.0",
	"react-dom": "^16.2.0"
	}
	}
	@import "./node_modules/antd/dist/antd.less";
	@import "./theme.less";