支持less

create-react-app 2.+支持sass、css，但是不支持less。为了要应用基于less开发的AntDesign组件，我们需要使项目支持less。

执行步骤

1. 我们首先执行以下代码来暴露webpack配置：

yarn run eject

如果产生报错This git repository has untracked files or uncommitted changes，可参考解决方案

1. 添加less、less-loader依赖

yarn add less less-loader

1. 在webpack.config.js文件中做以下修改
   

   1.

   在40行左右添加less匹配项

// style files regexes 样式匹配规则
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

// 新加less匹配项
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/

2.

在400行左右新增less配置

//在sass的配置下新增less配置
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},

这时在项目中已经可以正常使用less文件

配置AntDesign

1. 首先安装并配置

   按需引入

yarn add antd
yarn add babel-plugin-import

1. 在

   package.json

   中或者

   .babelrc

   中配置按需导入的组件库规则

"babel": {
"presets": [
"react-app"
],
"plugins": [ ["import", { "libraryName": "antd", "style": true }] ]
},

如果需要修改主题默认配置的话(例如颜色)导入less文件这里应设置为"style": true；否则设置为"style": css。
这里的区别推荐大家去babel-plugin-import官网看一下
在当你设为true时，会发编译失败，页面中antd组件也会没有样式了，命令行抛出如下异常：

.bezierEasingMixin() Inline JavaScript is not enable. Is it set in your options?

1. 未解决上述报错，需要在webpack.config.js中的getStyleLoaders中添加以下代码：

if (preProcessor) {
if (preProcessor === 'less-loader') { // 为less-loader添加配置项，启动javascript
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
modifyVars: { // 修改主题颜色
'primary-color': '#000000',
},javascriptEnabled: true // 解决上文报错
},
});
} else {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
});
}
}

getStyleLoaders

是与1.x相比较，2.x对css loader这一块做的提取，抽出了这个方法，第一个参数代表配置项，第二个参数代表使用的loader，返回的loader列表就是匹配的样式文件需要加载的loader

修改Antd主题颜色

上述代码中的modifyVars正是修改主题颜色的关键

modifyVars: { // 修改主题颜色
'primary-color': '#000000',
},

记得把之前测试用的import 'antd/dist/antd.css’删掉，就可以完美实现主题颜色的改变啦。