Sass在vue项目中的使用

首先安装sass依赖包:

npm install sass-loader --save-dev

npm install node-sass --save-dev

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

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

使用scss的时候在所在style样式标签上添加lang="scss"即可使用

以下附上部分sass在项目中的使用

<template>  
  <div>
      <h1>sssss</h1> 
      <div class="content">
          <ul>
              <li>一</li>
              <li>二</li>
              <li>三</li>
              <li>四</li>
          </ul>
          <p>wwwwww</p>
      </div>
  </div>
</template>
<script>
export default {
    
}
</script>

<style lang="scss" scoped>
//导入外部scss文件：@import './test.scss';
//变量
$font-size-20:20px;
$primary-color:#38f;
$background-color:yellow;
$width:800px;
h1{
    font-style: $font-size-20;
    color: $primary-color;
}
//混合
@mixin border-radius($radius){
    border-radius: $radius;
    -ms-border-radius:$radius;
    -o-border-radius:$radius;
    -moz-border-radius:$radius;
    -webkit-border-radius:$radius;
}
//继承
%content-message{
    color: $primary-color;
    font-size: $font-size-20;
    border: 2px solid red;
}
@function reduced($initialStyle){
    @return $initialStyle / 10 * 1rem;
}
.content{
    margin: 20px auto;
    width: $width;
    ul{
        list-style: none;
        width: 300px / 750px * 100%;//操作符的使用
        li{
          @extend %content-message;//继承的使用
          @include border-radius(10px);//混合的使用
          &:hover{
              background-color: $background-color;
          }
        }
    }
    p{
      width: reduced(300);
      height: reduced(20);
      line-height: reduced(20);
      border-radius: reduced(50);
      @extend %content-message;
    }
}
</style>