React中使用CSSmodules

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

目的

解决CSS变量名冲突

使用

由于本人使用的yarn包管理平台，所以只记录yarn的安装过程。

yarn add -dev [email protected] //这个版本比较稳定，升级会需要安装更多包

打开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",
}

在根目录创建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"
  ],