vue项目使用scss

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

{
test: /\.scss$/,
loaders: [‘style‘, ‘css‘, ‘sass‘]
}

// build/utils.js
// 添加代码
function generateSassResourceLoader () {
    var loaders = [
        cssLoader,
        ‘sass-loader‘,
        {
            loader: ‘sass-resources-loader‘,
            options: {
                resources: [
                    path.resolve(__dirname, ‘../scss/demo.scss‘), // 是你自己的路径和文件名

                ]
            }
        }
    ]
    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: ‘vue-style-loader‘
        })
    } else {
        return [‘vue-style-loader‘].concat(loaders)
    }
  }


// 修改代码
return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders(‘less‘),
    // sass: generateLoaders(‘sass‘, { indentedSyntax: true }),
    // scss: generateLoaders(‘sass‘),
    sass: generateSassResourceLoader(),
    scss: generateSassResourceLoader(),
    stylus: generateLoaders(‘stylus‘),
    styl: generateLoaders(‘stylus‘)
  }

1.npm uninstall sass-loader //卸载sass-loader
2.npm install sass-loader@7.3.1 --save-dev //安装7.3.1版本的scss，然后启动项目就ok了

<style lang="scss" scoped>
@import ‘./test.scss‘; //导入外部scss文件
.myText {
   border:1px solid red;
}
</style>

$color:red; //声明变量 $color

$color:red !default; //声明默认变量 $color
$color:purple; //根据需求覆盖默认变量
.father01 {
   color:$color;
}

$height:200px; //全局变量声明不在大花括号内
$bgcolor:blue;
body {
   .father01 {  //嵌套
      width:$width;
      height:$height;
      $border:1px solid red; //局部变量是声明在元素内的
      border: $border;
      $bgcolor:purple; //全局变量和局部变量名一致时，调用局部变量进行覆盖
      background-color: $bgcolor;
   }
}

body {
   .father01 {
      width:200px;
      height:200px;
      $border:1px solid red !global; //使用global关键词将$border变为了全局变量
      border:$border;
   }
   .father02 {
      width: 300px;
      height:300px;
      border:$border; //使用全局变量
   }
}

$left:left;
.father02 {
   width: 300px;
   height:300px;
   border:$border; //使用全局变量
border-#{$left}:2px solid purple; //使用字符串插值之前必须先声明
}

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

// 数字运算: 支持数字的加减乘除、取整等运算 (+, -, *, /, %)
$var: 20px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}

// 字符串运算： + 可用于连接字符串
// 注意，①：如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，
// 相反，②：无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号

p {
    cursor: e + -resize;
} 
//编译后
 p {
    cursor: e-resize; 
}

p:before { 
    content: "Foo " + Bar;  
    font-family: sans- + "serif";
}
// 编译后
p:before {
    content: "Foo Bar";
    font-family: sans-serif;
}

// 选择器嵌套
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

// 属性嵌套，比如border-color属性，可以写成：
p {
    border: {   // 注意，border后面必须加上冒号。
        color: red;
    }
}

// 在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成
a {
    &:hover { color: #ffb3ff; } 
}

.container {
   &>p {   //可以编译成CSS的 .container>p {} 效果
      color:purple;
   }
}

// 继承是基于类class的（有时是基于其他类型的选择器）
// 允许一个选择器，继承另一个选择器。比如，现有class1：

.class1 {
    border: 1px solid #ddd;
}

// class2要继承class1，就要使用@extend命令：
.class2 {
     @extend .class1; // 这里将继承.class1 类的所有样式
     font-size:120%;
 }

   // 使用@mixin命令，定义一个代码块。
　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}
    //使用@include命令，调用这个mixin。
　　div {
　　　　@include left;
　　}
　　
　　// mixin的强大之处，在于可以指定参数和缺省值。
　　@mixin left($value: 10px) {
　　    float: left;
　　    margin-right: $value;
　　}
    // 使用的时候，根据需要加入参数：
　　div {
　　　　@include left(20px);
　　}

.container {
   p {
      @if 1+1<3 {
         border:1px solid blue;
      } @else {
         border:1ps dashed palevioletred;
      }
   }
}

//for 循环
@for $i from 1 to 5 {
   .item-#{$i} {
      border:#{$i}px solid;
   }
}
//while 循环
$m:8;
@while $m > 0 {
   .items-#{$m} {
      width:2em*$m;
   }
   $m:$m - 2 ;
}
//这里可以对$m进行运算 让它每次都减去2
//each 语法
@each $item in class01,class02 { //$item就是遍历了in关键词后面的类名列
   .#{$item} {
      background-color:purple;
   }
}
//会编译成 .class01 , .class02 {background-color:purple;}

@function double($sn){ //SCSS允许自定义函数
   @return $sn*2;
}
.myText {
   border:1px solid red;
   width:double(200px); //使用在SCSS中自定义的函数
}

.myText {
   color:black;
   &:hover{
      //以下的lighten()、darken()等是SCSS内置的颜色函数
      color:lighten(#cc3, 10%); // #d6d65c颜色变浅
      color:darken(#cc3, 10%); // #a3a329颜色加深
      color:grayscale(#cc3); // #d6d65c
      color:complement(#cc3); // #a3a329
   }
}