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
打印出对象看下效果。
网友评论