Next.js + Antd (with Less)
Use Antd (Less) w/ Next.js, Zero Dependency on other Next-Plugins.
Demo
Yep! this plugin supports both Next.js and CRA since v1.0.
Features
- Zero Dependency on other Next.js Plugins
- Support Both Next.js & CRA Project
- Support Hot-Update After modifying Antd less vars
- Support Serverless Mode
- Support Antd Pro
Compatibility
- Next.js v11 / v12
- CRA v4 / v5
Installation
yarn add next-plugin-antd-less
yarn add --dev babel-plugin-importUsage
for Next.js
// next.config.js
const withAntdLess = require('next-plugin-antd-less');
module.exports = withAntdLess({
modifyVars: { '@primary-color': '#04f' }, // optional
lessVarsFilePath: './src/styles/variables.less', // optional
lessVarsFilePathAppendToEndOfContent: false, // optional
// optional https://github.com/webpack-contrib/css-loader#object
cssLoaderOptions: {
// ...
mode: "local",
localIdentName: __DEV__ ? "[local]--[hash:base64:4]" : "[hash:base64:8]", // invalid! for Unify getLocalIdent (Next.js / CRA), Cannot set it, but you can rewritten getLocalIdentFn
exportLocalsConvention: "camelCase",
exportOnlyLocals: false,
// ...
getLocalIdent: (context, localIdentName, localName, options) => {
return "whatever_random_class_name";
},
},
// for Next.js ONLY
nextjs: {
localIdentNameFollowDev: true, // default false, for easy to debug on PROD mode
},
// Other Config Here...
webpack(config) {
return config;
},
// ONLY for Next.js 10, if you use Next.js 11, delete this block
future: {
webpack5: true,
},
});Add a .babelrc.js
// .babelrc.js
module.exports = {
presets: [['next/babel']],
plugins: [['import', { libraryName: 'antd', style: true }]],
};Detailed config can be found in next.config.js
file.
for CRA / CRA-Co
const cracoPluginLess = require('next-plugin-antd-less/overrideWebpackConfig');
module.exports = {
babel: cracoBabel,
plugins: [
cracoPluginAnalyze,
{
plugin: cracoPluginLess,
options: {
modifyVars: {
'@THEME--DARK': 'theme-dark',
},
lessVarsFilePath: './src/styles/variables.less',
cssLoaderOptions: {
localIdentName: __DEV__ ? "[local]--[hash:base64:4]" : "[hash:base64:8]",
},
},
},
],
};Detailed config can be found in craco.config.js
file.
FAQ
Reference Project?
If you have any problem, please check mkn (Next.js) and mkr (CRA) first, I update these two repo's every time I update this plugin.
Default ClassName
| MODE | className | e.g. |
|---|---|---|
| DEV | [local]--[hash:base64:4] |
comp-wrapper--2Rra |
| PROD | [hash:base64:8] |
2Rra8Ryx |
for Unify getLocalIdent (Next.js / CRA), Cannot set it, but you can rewritten getLocalIdentFn
localIdentName is invalid? How to rewritten?
you can defind your own localIdentName in pluginOptions.cssLoaderOptions.modules.getLocalIdent
options: {
lessVarsFilePath: './src/styles/variables.less'
// ...
// https://github.com/webpack-contrib/css-loader/tree/b7a84414fb3f6e6ff413cbbb7004fa74a78da331#getlocalident
//
// and you can see file
// https://github.com/SolidZORO/next-plugin-antd-less/getCssModuleLocalIdent.js
getLocalIdent: (context, _, exportName, options) => {
return 'whatever_random_class_name';
}
// ...
}How to import global CSS style (e.g. styles.css)?
// ./page/_app.tsx
//
// use `import` or `require` syntax,
import './styles.css';How to import global Less style (e.g. styles.less)?
// ./page/_app.tsx
//
// use `require` syntax,
require('./styles.less');How to overwrite antd less variables?
// ./src/styles/variables.less
@import '~antd/lib/style/themes/default.less'; // <-- you need to import antd variables once in your project
@primary-color: #04f; // change antd primary-color// 🔰️ Tips: if your use babel import plugin and set `libraryDirectory`, please keep `libraryDirectory` and `less path` consistent.
// lib
['import', { libraryName: 'antd', libraryDirectory: 'lib', style: true }]
// `@import '~antd/lib/style/themes/default.less';` <-- use `lib`
// es
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]
// --> `@import '~antd/es/style/themes/default.less';` <-- use `es`// plugin options
lessVarsFilePath: './src/styles/variables.less'Background
Issues
Since Next.js 9.3 supports sass and css by default, but does not support less. If you use Next.js > 9.3 and use the official less plugin, you will definitely encounter the following problems.
-
CIL Warning
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected. -
Does not support automatic recognition of css modules, e.g.
a.module.lessanda.less
Solution
-
Find sassModule and copy onec and replace the
sass-loaderinside withless-loader. -
Then enable the
modules.autooption ofcss-loader. This can simply match all*.less(no need to match it is*.module.lessor*.less), and hand it over tocss-loader.
This is the lowest cost way, And CLI will no longer show this disgusting warning. The important thing is that there is Zero Dependency on other Next-Plugins..
License
MIT © Jason Feng