- 安装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-基本使用
步骤
-
改样式文件名。从
xx.scss -> xx.module.scss
(React脚手架中的约定,与普通 CSS 作区分) -
引入使用。
-
组件中导入该样式文件(注意语法)