react解决样式冲突问题

在react脚手架中已经有了sass的配置，因此只需要安装sass的依赖包，就可以直接使用sass了

• 安装sass依赖包

npm i sass -D 

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

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

 css-样式私有化

css modules-基本使用

步骤

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

2. 引入使用。

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

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

   2. 通过 styles 对象访问对象中的样式名来设置样式

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

      css类名是index.module.scss中定义的类名。

 示例

定义样式 index.module.css 

.root {f