在vue中使用scss

然后安装 node-sass和sass-loader

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

在build文件夹下的webpack.base.conf.js的rules里面添加配置

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

我这样做完以后，运行一下，报错

Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

这是因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行，下面说一下修改方法，很简单，如下，

找到package.json文件，里面的 "sass-loader"的版本更换掉 就行了。

我本地是将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",

执行命令，重新安装项目依赖：

npm install
然后重新 npm run dev 就完美的解决啦！

首先在<style>标签中加入scss:

<style lang="scss"></style>

下面列举一些比较常用的东西：
假设模板如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>hello</p>
    <div class="test1"></div>
    <div class="test2"></div>
  </div>
</template>

1、变量
用$定义变量

$app-background: #d00;
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  background:$app-background;  //可以直接引用
}

假如你的变量定义在了一个scss文件中，用import引入即可
@import './style/variables'
2、@mixin混合器

@mixin divStyle($backgroundColor: #0d0) {
    position: relative;
    margin:0 auto;
    width: 100px;
    height:100px;
    background:$backgroundColor;
}

.test1{
      @include divStyle()  
  }

用@include引用，有默认值时可以不传值；
编译为：

.test1 {
    position: relative;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background: #0d0;
}

3、@extend继承

.test1 {
    border: 1px solid #333;
}

.test2 {
    @extend .test1;
    background-color: #999;
}

//编译后
.test1, test2 {
  border: 1px solid #333;
}

.test2 {
  background-color: #999;
}

4、属性嵌套也时必用的啊，可以这样写：

#app {
  img{
      width: 200px;
  }
}
//编译为
#app img {
      width: 200px;
}

如果你想要在嵌套的选择器里边应用一个类似于：hover的伪类，就需要用到 & 这个连接父选择器的标识符。

#app {
  p{
      font-size: 16px;
      &:hover {
            color: #999;
        }
  }
}
//编译后：
#app p {font-size: 16px; }
#app p:hover { color: #999; }

文档： https://www.sass.hk/guide/