create-react-app配置less环境
最近使用react搭建一个私人项目，css解决方案采用less+css module，项目脚手架采用create-react-app。
利于脚手架生成项目后，发觉less无法直接使用，参考网上教程，需对项目进行配置，配置方式有两种：
- 通过cra自带的npm run eject暴露出项目配置文件，然后在配置文件中对webapck配置进行更改。
- 通过react-app-rewired对cra项目配置进行重写
第二种方式显得更为优雅点，具体配置方法如下：
安装react-app-rewired及customize-cra
npm install customize-cra react-app-rewired --dev
创建config-overrides.js文件
项目根目录下创建config-overrides.js文件
添加文件内容
const { override, addLessLoader, fixBabelImports } = require("customize-cra");
module.exports = override(
addLessLoader({
strictMath: true,
noIeCompat: true,
modifyVars: {
"@primary-color": "#1DA57A", // for example, you use Ant Design to change theme color.
},
cssLoaderOptions: {}, // .less file used css-loader option, not all CSS file.
cssModules: {
localIdentName: "[path][name]__[local]--[hash:base64:5]", // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
},
}),
fixBabelImports("import", {
libraryName: "antd",
style: "css",
})
);
addLessLoader方法即为配置less环境的配置方法，需要注意的是cssModules的文件格式，上述配置表示只有less文件名为*.module.less时css module才会起效，大家有兴趣可以尝试不同的文件命名，import后通过console.log打印出对象看下效果。
