Next.js + Antd (with Less)
Use Antd (with Less) with Next.js, Zero Dependency on other Next-Plugins.
Support Hot Update style after modifying Antd less variables since 1.0.
Demo
Yep! this plugin supports both Next.js and CRA-Co since v1.0.
Introduction
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.less
anda.less
Solution
-
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..
Compatibility
- next
v9.3
~v10.1+
(webpack4) - less
v3.0
~v4.0+
Installation
yarn add next-less
Usage
for Next.js
// next.config.js
const withAntdLess = require('next-less');
module.exports = withAntdLess({
// optional
modifyVars: { '@primary-color': '#04f' },
// optional
lessVarsFilePath: './src/styles/variables.less',
// optional https://github.com/webpack-contrib/css-loader#object
cssLoaderOptions: {},
// Other Config Here...
webpack(config) {
return config;
},
});
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-Co
const cracoPluginLess = require('next-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.
Tips
- If you need to import the global CSS (e.g. styles.css), you can write
in
_app.tsx
,
// ./page/_app.tsx
import './styles.css';
- If you need to import the global Less (e.g. styles.less), you can
use
require
syntax,
// ./page/index.tsx
require('./styles.less');
- If you want to override
antd
vars, make sure that antd'sdefault.less'
is referenced at least once in the project's less file. issues #36
@import '~antd/lib/style/themes/default.less';
@primary-color: #04f;
.xyz {
font-size: 100%;
}
License
© MIT