React配置less与antd定制主题

一、配置less

在配置less之前，我使用 create-react-app ，得到 React 版本为 ^16.8.6 。

1. 安装依赖并解构目录：（可以在命令前加 sudo 确保不会出现权限问题）

yarn add babel-plugin-import 或 npm install babel-plugin-import
yarn less-loader 或 npm install less-loader
yarn eject 或 npm run eject

解构后，我得到的webpack版本为 4.28.3 ， config 文件夹长这样：

于是，打开 webpack.config.js 修改配置：

在第42行附近修改代码为：

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;    //新增
const lessModuleRegex = /\.module\.less$/;    //新增

在第327行附近修改代码为：

oneOf: [
    {
        ...//其他配置
    }，
    ...//其他配置
    
    //配置less-loader（新增）
    {
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
    },
    {
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
      ),
    },
    //EndOf配置less-loader（新增）
    
    ...//其他配置
]

二、配置antd定制主题

修改 package.json ：

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ],
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true    //这里是 true 不是 'css'
        }
      ]
    ]
  }

在 webpack.config.js 第110行附近修改代码为：

if (preProcessor) {
  let loader = {
    loader: require.resolve(preProcessor),
    options: {
      sourceMap: isEnvProduction && shouldUseSourceMap,
    }
  }
  if (preProcessor === "less-loader") {    //新增
    loader.options.modifyVars = {
      'primary-color': '#1DA57A',
      'link-color': '#1DA57A',
      'border-radius-base': '2px'
    }
    loader.options.javascriptEnabled = true
  }    //EndOf新增
  loaders.push(loader);
}

最后，看到按钮变色就是成功啦！更多样式修改可以看 文档 ~

完~若有不足，请多指教，万般感谢！