通过 CRA
创建的项目,如果要支持 less
需要修改编译配置。
修改编译配置,可以通过 npm run eject
弹出配置后修改,但是 eject
是不可逆的,弹出配置后将不会跟随官方升级项目的 react-script
版本。
如果不想通过 eject
重写配置,也可以通过以下几种方式:
- 通过 CRA 官方支持的
--scripts-version
参数,创建项目时使用自己重写过的react-scripts
包。官方介绍- 使用
react-app-rewired + customize-cra
组合覆盖配置- 使用
craco
覆盖配置
本文将通过 craco
来完成 less
的配置
配置craco
- 安装
@craco/craco
npm i @craco/craco -D
- 修改
package.json
中的script
标签
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
}
- 在项目根目录中创建
craco.config.js
/* craco.config.js */
module.exports = function () {
...
};
craco 的基础配置已经完成,craco.config.js 配置文件结构,可以在 craco 官方的文档中详细查询:Configuration Overview
启用sass
CRA脚手架中添加了 sass-loader
的支持,如果要启用sass的话,只需安装 node-sass
即可。
- 安装
node-sass
npm install node-sass --save
- 将
src/App.css
重命名为src/App.scss
- 如果需要启用
CSS Modules
,将 CSS 文件扩展名更改为[name].module.scss
或[name].module.sass
- CRA脚手架使用
[name].module.css
文件命名约定支持 CSS Modules 和常规 CSS 。- CSS Modules 允许通过自动创建
[filename]_[classname]__[hash]
格式的唯一 classname 来确定 CSS 的作用域
启用less
CRA脚手架默认不支持 less
,所以需要通过拓展来实现
- 安装相关 loader
/* 安装craco-less,支持覆些webpack loader */
npn i craco-less -S
/* 同时需要安装less 和 less-loader */
npm install --save-dev less-loader less
- 在
craco.config.js
中补充相关配置:
const CracoLessPlugin = require('craco-less');
const { loaderByName } = require('@craco/craco');
module.exports = function (webpackEnv) {
const lessModuleRegex = /\.module\.less$/;
return {
plugins: [
{
plugin: CracoLessPlugin,
options: {
// less loader option
lessLoaderOptions: {
lessOptions: {
/*
如果项目中有使用TDesign或AntDesign组件库需要自定义主题,可以在modifyVars中添加对应less变量
*/
modifyVars: {
@primary-color: '#2378ff'
},
javascriptEnabled: true,
},
},
modifyLessRule(lessRule) {
lessRule.exclude = lessModuleRegex;
return lessRule;
},
modifyLessModuleRule(lessModuleRule) {
// configure the file suffix
lessModuleRule.test = lessModuleRegex;
// configure the generated local ident name
const cssLoader = lessModuleRule.use.find(loaderByName('css-loader'));
cssLoader.options.modules = {
/*
注意这里的命名规则:
- CRA脚手架创建的项目是可以直接使用css modules的,css文件的命名规则默认是[local]_[hash:base64:5]
- 这里使用css modules的命名规则
*/
localIdentName: '[local]_[hash:base64:5]',
};
return lessModuleRule;
},
},
},
],
};
};
3.将CSS文件扩展名改为 [name].less
或 [name].module.less
(启用 CSS Modules
)