SolidZORONext.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