2020/05/21
在create-react-app 脚手架创建的项目中,突然想到要用 less 的模块化,但是 create-react-app 创建的项目只是自带 css 模块化。要使用 less 模块化,需要自行配置
首先,创建项目
create-react-app test
然后,把 react 脚手架的配置弹射出来,并 npm run i 安装项目依赖
npm run eject
找到项目下 config/webpack.config.js,在 file-loader 之前加入这部分代码
// less 开启模块化
{
test: /\.less$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
exclude: /node_modules/,
options: {
modules: {
localIdentName: '[local]_[hash:base64:5]'
}
}
},
{
loader: 'less-loader'
}
]
},
运行项目 npm run start,创建一个组件,并引用 less 样式文件
import React, { Component } from 'react'
import styles from './index.less'
class Home extends Component {
state = { }
render() {
return (
<div>
<p className={ styles.red }>Red</p>
<p className={ styles.green }>Green</p>
</div>
);
}
}
export default Home;
.red {color: red}
.green {color: green; font-size: 20px;}
在浏览器审查元素,可以看到红框中,类名后面增加了唯一的的字符串,类似 vue 里面的样式类名。css 模块化最好的办法就是 class 类名的唯一性
-------------------------分割线-----------------------
2020/05/22 更新: 昨天做法能做到模块化,但是也有问题,就是普通的引用 less 文件会失败。可以先用之前的代码配置,尝试下下面的代码,再回头来看看这个新的。
import styles from './app.less' // 成功引用
import './app.less' // 这种就会引用失败
我重新看了下 create-react-app 的 webpack 配置,它自带的 css 模块化,是通过区分文件名来实现模块化需求的,当你的文件名是 xxx.module.css 时,则对此文件开启模块化,需要 import styles from 'xxx.module.css' 这种方式来引用,普通引用 import 'xxx.module.css' 则无效。
所以,我将昨天的 webpack 配置修改了下,如下代码
// less 开启模块化
{
test: /\.less$/,
exclude: /node_modules|\.module\.less$/, // 排除 xxx.module.less 模块化文件
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'less-loader'
}
]
},
{
test: /\.module\.less$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]_[hash:base64:5]'
}
}
},
{
loader: 'less-loader'
}
]
},
或者更更更更更更简单的办法,就是复制原有的 webpack 里面的 sass 配置:
{
test: /\.less$/,
exclude: /\.module\.less$/,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: /\.module\.less$/,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},