react框架默認知識scss,所以只需要下載sass-loader和node-sass即可
npm install sass-loader node-sass --save
就可以建立xxx.scss或者xxx.module.scss文件,然后引入項目當中既可以使用
如果是scss后綴結束的時候, import “xxx.scss” 即可,當然后面根據自己的路徑而定
如果是module.scss后綴結束,可以 import styles from "xxx.module.scss" 既可,這樣就可以把類名局域話,不會重復了,但是用的時候,需要className={styles.xxx} 其中xxx為類名 ,這樣系統會自動編譯后面會加上序列號,類名不會重復
----------------------------我是突然出現的分割線-------------------------------------
定義變量,如下可以定義變量名
其中 類名為 test-a
background:red
$c:"a";
$color:red;
.test-#{$c}{
background:$color;
}
定義函數 和使用函數
@mixin background($url) {
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background: url($url);
}
使用過函數
.test{
@include background('./images/logo.png');
}