CSSmodules的作用主要是避免全局類命名沖突闹啦，如果你知道Vue的scoped，你就會(huì)理解他的意義了辕坝。相比與CSS in JS亥揖，CSSmodules的使用更加平民化。
目的
解決CSS變量名沖突
使用
由于本人使用的yarn包管理平臺(tái)圣勒，所以只記錄yarn的安裝過(guò)程费变。
yarn add -dev react-app-rewired@2.0.2-next.0 //這個(gè)版本比較穩(wěn)定，升級(jí)會(huì)需要安裝更多包
打開(kāi)package.json文件修改配置圣贸，react-app-rewired目的是不需要eject暴露webpack全局配置情況下修改和添加webpack配置挚歧，當(dāng)然還要結(jié)合config-overrides.js 文件
/* package.json */
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
}
在根目錄創(chuàng)建config-overrides.js
/*config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
const rewireCssModules = require('react-app-rewire-css-modules');
const path = require('path')
function resolve (dir) {
return path.join(__dirname, '.', dir)
}
module.exports = function override(config, env) {
// do stuff with the webpack config...
//啟用ES7的修改器語(yǔ)法（babel 7）
config = injectBabelPlugin(['@babel/plugin-proposal-decorators', { "legacy": true }], config) //{ "legacy": true }一定不能掉，否則報(bào)錯(cuò)
//按需加載UI組件
config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
//配置別名吁峻，設(shè)置@指向src目錄
config.resolve.alias = {
'@': resolve('src')
}
//css模塊化
config = rewireCssModules(config, env);
return config;
};
安裝css-modules包滑负，可根據(jù)自己喜歡的預(yù)處理語(yǔ)言進(jìn)行安裝
//scss版本
yarn add --dev react-app-rewire-css-modules sass-loader node-sass
//less版本
yarn add --dev react-app-rewire-less-modules
moudles文件要加上特殊寫法
*.module.css
*.module.less
*.module.scss
就是這樣
引入CSS文件
引入css
index.module.scss
對(duì)象類型設(shè)置變量名
變量名后會(huì)出現(xiàn)隨機(jī)數(shù)
這樣我們的CSSmodules就完成了
啟動(dòng)過(guò)程中會(huì)出現(xiàn)一個(gè)browserslist的報(bào)錯(cuò),把browserslist這樣設(shè)置一下就好了
//package.json
"browserslist": [
"last 2 versions",
"android 4",
"opera 12"
],
