@kova/antd-less v1.0.0

Next.js + Antd (with Less)

Use Antd w/ Next.js, Zero Dependency on other Next-Plugins.

Support Hot Update style after modifying Antd less variables since v1.0.

Demo

📌 Demo 1 - w/ Next.js v10

📌 Demo 2 - w/ CRA-Co v4

Yep! this plugin supports both Next.js and CRA-Co since v1.0.

Compatibility

• next v9.3 ~ v10.2+ (support webpack 4 & 5, since v1.2)
• less v3.0 ~ v4.0+

Installation

yarn add next-plugin-antd-less

Usage

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;
  },

  future: {
    // if you use webpack5
    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-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',
      },
    },
  ],
};

Detailed config can be found in craco.config.js file.

FAQ

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
//
@primary-color: #04f; // change antd primary-color

// plugin options
lessVarsFilePath: './src/styles/variables.less'

@seeMore issues #36

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.

1. CIL Warning Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.

2. Does not support automatic recognition of css modules, e.g. a.module.less and a.less

Solution

1. Find sassModule and copy onec and replace the sass-loader inside with less-loader.

2. Then enable the modules.auto option of css-loader. This can simply match all *.less (no need to match it is *.module.less or *.less), and hand it over to css-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