antd的craco实现按需引入样式

antd的craco实现按需引入样式

插件安装：

yarn add antd @craco/craco babel-plugin-import 

项目根目录下craco.config.js配置：

const CracoLessPlugin = require('craco-less');

module.exports = {
    babel: {//支持装饰器
        plugins: [
            [
                "import",
                {
                    "libraryName": "antd",
                    "libraryDirectory": "es",
                    "style": 'css' //设置为true即是less 这里用的是css
                }
            ]
        ]
    },
    plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

package.json的配置：

scripts中start、build、test三项修改为如下语句

"scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test",
}

接下来是个人喜好，修改了主题：

插件需要：

yarn add craco-less

craco.config.js配置

const CracoLessPlugin = require('craco-less');
const { getThemeVariables } = require('antd/dist/theme');

module.exports = {
    babel: {//支持装饰器
        plugins: [
            [
                "import",
                {
                    "libraryName": "antd",
                    "libraryDirectory": "es",
                    "style": 'css' //设置为true即是less 这里用的是css
                }
            ]
        ]
    },
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
                    modifyVars: getThemeVariables({
                        dark: true, // 开启暗黑模式
                        compact: true, // 开启紧凑模式
                    }),
                    javascriptEnabled: true,
                },
            },
        },
    ],
};