react16.8|react16.8 按需引入antd+自定义theme react16.8按需引入antd+自定义th

一、配置less 【react16.8|react16.8 按需引入antd+自定义theme】在配置less之前，我使用create-react-app，得到React版本为^16.8.6。

安装依赖并解构目录：（可以在命令前加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文件夹长这样：

文章图片
image.png
于是，打开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": [ [ "import", { "libraryName": "antd", "libraryDirectory": "es", "style": true//这里是 true 不是 'css' } ] ] }

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

文章图片
image.png

if (preProcessor) { let loader = { loader: require.resolve(preProcessor), options: { sourceMap: isEnvProduction && shouldUseSourceMap } }; if (preProcessor === "less-loader") { loader = { ...loader, options: { modifyVars: { //自定义主题 "primary-color": " #1890ff", 'border-radius-base': '2px' }, javascriptEnabled: true } }; } loaders.push(loader); }

更多样式修改可以看文档~