react中sass的使用

• 安装sass依赖包

• npm i sass -D

• 把index.css改成index.scss
• 导入index.scss文件
• 注意：如果使用了scss，scss中使用图片的绝对路径的时候需要加上~

background-image: url(~assets/login.png);

 css-样式污染  这个组件的样式影响其他组件

解决方案

• 手动处理 （起不同的类名）

• CSS IN JS ： 以js的方式来处理css 。思想是让css有局部作用域全局作用域这样的区分

• CSS IN JS

• ​
  CSS IN JS：是使用 JavaScript 编写 CSS 的统称，用来解决 CSS 样式冲突、覆盖等问题
  
  CSS IN JS 的具体实现有 50 多种，比如：CSS Modules、styled-components 等
  
  推荐使用：CSS Modules （React脚手架已集成，可直接使用）
  
  ​

  css modules-基本使用

 步骤

1. 改样式文件名。从 xx.scss -> xx.module.scss （React脚手架中的约定，与普通 CSS 作区分）

2. 引入使用。

3. 组件中导入该样式文件（注意语法）

4. import styles from './index.module.scss'

5. 通过 styles 对象访问对象中的样式名来设置样式
6. 例子：

   <div className={styles.css类名}></div>

7. 注意：css类名是index.module.scss中定义的类名。

原理

CSS Modules 通过自动给 CSS 类名补足类名，保证类名的唯一性，从而避免样式冲突的问题 。补充前缀组件名和后缀随机值

CssModules-维持类名

格式

在xxx.module.scss中，如果希望维持类名，可以使用格式：

:global(.类名)