Use Antd (Less) w/ Next.js, Zero Dependency on other Next-Plugins.
Yep! this plugin supports both Next.js and CRA since v1.0.
- Zero Dependency on other Next.js Plugins
- Support Both Next.js & CRA Project
- Support Hot-Update After modifying Antd less vars
- Support Serverless Mode
- next
v9.0
(webpack 4) - next
v10 & v11
(webpack 4 & 5) - less
v3.0+
yarn add next-plugin-antd-less
for Next.js
// next.config.js
const withAntdLess = require('next-plugin-antd-less');
module.exports = withAntdLess({
// optional
modifyVars: { '@primary-color': '#04f' },
// optional
lessVarsFilePath: './src/styles/variables.less',
// optional
lessVarsFilePathAppendToEndOfContent: false,
// optional https://github.com/webpack-contrib/css-loader#object
cssLoaderOptions: {},
// 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.
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',
},
},
],
};
Detailed config can be found
in craco.config.js
file.
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.
// ./page/_app.tsx
//
// use `import` or `require` syntax,
import './styles.css';
// ./page/_app.tsx
//
// use `require` syntax,
require('./styles.less');
// ./src/styles/variables.less
//
@primary-color: #04f; // change antd primary-color
// plugin options
lessVarsFilePath: './src/styles/variables.less'
@seeMore issues #36
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.less
anda.less
-
Find sassModule and copy onec and replace the
sass-loader
inside withless-loader
. -
Then enable the
modules.auto
option ofcss-loader
. This can simply match all*.less
(no need to match it is*.module.less
or*.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..
© MIT