文章目录
react项目自带css module作为解决方案应对全局样式污染、命名混乱等问题。原理是为每个类生成一个唯一的类名。
但样式嵌套比较深时,less比css写法更加简洁,而在react项目里直接安装less 和less-loader是没有用的,因为没有在webpack里配置。
有两种方式对webpack进行修改:
- customize-cra react-app-rewired
重写webpack.config.js - eject
暴露配置文件,在源文件上进行修改。
下面详述
ps:如果选择.css写样式 就不需要搞这些了
1 customize-cra react-app-rewired
1.1 安装less less-loader customize-cra react-app-rewired
yarn add less less-loader -D
yarn add react-app-rewired customize-cra -D
1.2 修改package.json
//package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
1.3 根目录下新建config-overrides.js
该文件用来重写配置,日后有其他需要重写的也要在这里写。
//config-overrides.js
const { override, addLessLoader } = require('customize-cra');
module.exports = override(
addLessLoader({
strictMath: true,
noIeCompat: true,
loader: "css-loader",
options: {
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
},
sourceMap: true
}
}),
)
2 eject
2.1 暴露配置文件
yarn eject
这一步可能有git的错误,自行百度
如果是练手的项目,
find . -name ".git" | xargs rm -Rf
删掉它就行
2.2 更改webpack.config.js
2.2.1
const lessRegex = /\.less$/; //这一句和下一句是新增的less的配置
const lessModuleRegex = /\.module\.less$/;
2.2.2
模仿sass-loader写,这两条跟它并列。
// Adds support for CSS Modules, but using LESS
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
modules: true,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
注意less-loader的版本,太高的话跟webpack不兼容会报Module build failed (from ./node_modules/less-loader/dist/cjs.js): TypeError: this.getOptions is not a function
装这个版本的
npm install less-loader@5.0.0
3 使用
对于组件Component.js,同级目录新建Component.module.less样式文件
//引入
import styles from './Component.module.less'
//使用 将className='' 改成 className={styles.类名}
<div className={styles.eg1}> </div>
感谢https://www.jianshu.com/p/94ac7250ccf0,
我的项目是js写的,如果是ts项目,以上网址有相关解答。
各个细节问题该作者也有比较详细的阐述。