欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

通过craco给antd进行自定义主题配置

程序员文章站 2022-03-11 18:38:34
...

1. 安装craco插件

npm install @craco/craco

2. 修改package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

3. 在项目根目录创建一个 craco.config.js 用于修改默认配置(按需引入)

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


module.exports = {
    babel: {
        plugins: [
           [
               "import", 
               {
                   "libraryName": "antd",
                   "libraryDirectory": "es",
                    "style": true //设置为true即是less
                }
            ]
        ]
    },
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { '@primary-color': '#1DA57A' },
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
};
相关标签: Antd Design