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

}