如何在 antd 中使用 webpack答案

【问题标题】：How to use webpack with antd如何在 antd 中使用 webpack
【发布时间】：2021-01-07 13:17:14
【问题描述】：

我尝试用webpack.config.js自定义一个antd的主题，但是我不明白它是如何工作的。我想用less-loader自定义CSS。

我关注这个link

我有一个`webpack.config.js：

module.exports = {
    rules: [{
        test: /\.less$/,
        use: [{
            loader: 'style-loader',
        }, {
            loader: 'css-loader', // translates CSS into CommonJS
        }, {
            loader: 'less-loader', // compiles Less to CSS
            options: {
                lessOptions: { // If you are using less-loader@5 please spread the lessOptions to options directly
                    modifyVars: {
                        'font-size-base': '140px'
                    },
                    javascriptEnabled: true,
                },
            },
        }],
    }],
}

但字体大小基本不会改变。

注意：我使用 TypeScript 开发了一个 React 应用程序。

【问题讨论】：

这个文档看起来太旧了，所以我认为它不太可能工作。你有一个可重复的回购吗？
我成功使用 CracoLessPlugin 谢谢

标签： reactjs typescript webpack antd

【解决方案1】：

npm install craco-less --save

在我的 package.json 中（对于 craco less 添加这个）：

{
  "dependencies": {
    "@craco/craco": "^5.6.4",
    "craco-less": "^1.17.0"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
  "devDependencies": {
    "less": "^4.0.0",
    "less-loader": "^7.2.1"
  }
}

在项目的根目录下，我有一个 craco.config.js ：

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

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { '@primary-color': 'rgba(0, 0, 0, 0.87);' },
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
};

如果要修改主题，请在 modifyVars 中注明修改 antd 的变量：https://ant.design/docs/react/customize-theme#Ant-Design-Less-variables

在我的反应组件中我有：

import './competenceGrid.less';

competitionGrid.less ：

@import '~antd/dist/antd.less';

/*some css*/
}

【讨论】：