在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-基本使用
步骤
-
改样式文件名。从
xx.scss -> xx.module.scss
(React脚手架中的约定,与普通 CSS 作区分) -
引入使用。
-
组件中导入该样式文件(注意语法)
import styles from './index.module.scss'
-
通过 styles 对象访问对象中的样式名来设置样式
<div className={styles.css类名}></div>
css类名是index.module.scss中定义的类名。
-
示例
定义样式 index.module.css
.root {f