Example config to support less theming of Ant Design in Next.js
Last active
October 3, 2018 19:09
-
-
Save kriscarle/d3136e9b15634846036397409bf98214 to your computer and use it in GitHub Desktop.
Next.js w/Ant Design Theming
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"presets": [ | |
"next/babel", | |
"stage-0" | |
], | |
"plugins": [ | |
"transform-decorators-legacy", | |
[ | |
"import", | |
{ | |
"libraryName": "antd", | |
"style": false | |
} | |
] | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
) | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "./node_modules/antd/dist/antd.less"; | |
@import "./theme.less"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@primary-color: green; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment