next-less v1.1.0
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