react 配置scss


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');
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM