八、防止样式污染

1. CSS Modules

**因为：**react中前端自动化打包工具webpack默认配置了CSS Modules （注：vue是scoped

**所以：**可以直接用，但要遵循规则

规则：

1. 样式文件名： 名称.module.css
2. 组件内导入： import styled from '路径/名称.module.css'
3. 使用： className={styled.类名}

缺点：没有用css预处理

2. LESS Modules

2.1 弹出配置文件 eject（别动）

**步骤1：**安装 yarn add less@2.7.3 less-loader

**步骤2：**配置

在config/webpack.config.js文件中 搜1：【const sassModuleRegex】 增1：增加两行代码

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

搜2：【test: sassModuleRegex】 在它的大括号【同级后面】加下述

{
    test: lessRegex,
        exclude: lessModuleRegex,
            use: getStyleLoaders(
                {
                    importLoaders: 3,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
            ),
                sideEffects: true,
},
    {
        test: lessModuleRegex,
            use: getStyleLoaders(
                {
                    importLoaders: 3,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                    modules: {
                        getLocalIdent: getCSSModuleLocalIdent,
                    },
                },
                'less-loader'
            ),
    },

**步骤3：**验证

App.module.less （注：类名推荐统一小驼峰

.t1 {font-size: 30px; color:green;}

App.js

import styled2 from './App.module.less'

<div className={styled2.t1}>测试</div>

3.2 🙅🏻‍♀️不弹出配置文件 （用这个)

craco是一个对 create-react-app 进行自定义配置的社区解决方案

现在我们安装 craco 并修改 package.json 里的 scripts 属性。

3. craco

yarn add @craco/craco -D

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

然后安装 craco-less 并修改 craco.config.js 文件如下。

yarn add craco-less -D

最后在项目根目录创建一个 craco.config.js 用于修改默认配置。

const CracoLessPlugin = require('craco-less');
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin
    },
  ],
};

4. Styled Components

4.1 语法

1.安装：yarn add styled-components

• 支持sass、less语法

2.写样式

styled.js

import styled from 'styled-components'
// 一般用Container命名
export const Container = styled.标签名`
	div{
		width: 200px;
	}
`;

3.组件内使用

用<Container>标签包裹

import {Container} from './styled.js'

const Test=()=>{
    return (
    	<Container>
        	<div>你好</div>
        </Container>
    )
}

vscode插件 vscode-styled-components