React中 css被覆盖的解决方案（2020-3-8）

[yaogengzhu]

在react项目中，如果我们使用css, 或者scss ，最终会被打包到一个文件中，这时会产生css被覆盖的情况出现！

解决方案有以下

• 尽可能使用复杂的css命名 （low)
• 使用css-in-jss （引入多余的模块, 而且比较麻烦）
• 使用react-app-rewire-css-modules

webpack 配置！！！

对于react 项目，我们需要对webpack,进行重写，重写的过程不再赘述。

新建文件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;
};

简单说下需要改的pack.json

"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test --env=jsdom",
}

如何使用

更改scss的命名， 如 xxxx.module.scss

import React from 'react'
import styles from './xxx.module.scss'

function Header() {
    return (
         <div calssName={ styles.name }> </div>
}

[yaogengzhu]

补充设置别名时的问题， 在typescript项目中，@ 报错的问题

在ts结合的项目中，设置了上面的远远不够， 我们要结合 tsconfig.json , 在该文件最后一行补充

"extends": "./paths.json"

同级目录下新建pahts.json文件

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "@/*": ["*"]
        }
    }
}