CSSmodules的作用主要是避免全局類命名沖突，如果你知道Vue的scoped，你就會理解他的意義了。相比與CSS in JS，CSSmodules的使用更加平民化。

目的

解決CSS變量名沖突

使用

由于本人使用的yarn包管理平臺，所以只記錄yarn的安裝過程。

yarn add -dev react-app-rewired@2.0.2-next.0 //這個版本比較穩(wěn)定，升級會需要安裝更多包

打開package.json文件修改配置，react-app-rewired目的是不需要eject暴露webpack全局配置情況下修改和添加webpack配置，當然還要結合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的修改器語法（babel 7）
    config = injectBabelPlugin(['@babel/plugin-proposal-decorators', { "legacy": true }], config)   //{ "legacy": true }一定不能掉，否則報錯

    //按需加載UI組件
    config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);

    //配置別名，設置@指向src目錄
    config.resolve.alias = {
        '@': resolve('src')
    }
    //css模塊化
    config = rewireCssModules(config, env);


    return config;
};

安裝css-modules包，可根據自己喜歡的預處理語言進行安裝

//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

對象類型設置變量名

變量名后會出現隨機數

這樣我們的CSSmodules就完成了

啟動過程中會出現一個browserslist的報錯,把browserslist這樣設置一下就好了

//package.json
"browserslist": [
    "last 2 versions",
    "android 4",
    "opera 12"
  ],