在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 類名的唯一性