Use Antd (with Less) with Next.js, Zero Dependency on other Next-Plugins.
๐ Demo w/ Next.js v10
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..
yarn add next-plugin-antd-less
// 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 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 }]],
};
- 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');
- next
9.3.0+
- less
v4.0.0+
- less
v3.0.0+
ยฉ MIT