在vue+webpack中使用sass

在使用vue-cli等脚手架初始化项目之后，css-loader和vue-style-loader就默认装好了，如果我们要在vue组件中使用sass应该这么做呢？
首先需要安装node-sass和sass-loader

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

–no-optional参数的用法在我的另外一篇博客中有详细说明。
之后在build文件夹下的webpack.base.conf.js中配置新的rules

{
    test:/\.scss$/,
    loader:"vue-style-loader!css-loader!sass-loader"
}

目前，所需要的模块就已经安装好了，现在这里有一个vue组件——App.vue

<template>
  <div id="app">
    <v-header></v-header>
    <div class="tab">
      <div class="tab-item">
        商品
      </div>
      <div class="tab-item">
        评论
      </div>
      <div class="tab-item">
        商家
      </div>
    </div>
    <div class="content">
      i am content
    </div>
  </div>
</template>

<script>
  //js相关代码
</script>

<style lang="scss" rel="text/css">
  #app{
    color:red;
    .tab{
      display: flex;
    }
  }
</style>

这里我们只看与sass有关的代码，此时需要在style标签中设置lang="scss" rel="text/css"，之后我们npm run dev看一下效果



样式已经生效了，但我们可以发现.tab下面的样式中多出了两条被删除的样式，这是因为在初试话项目的时候，webpack已经为我们配置好了autoprefixer。postcss等模块，这些模块可以使css样式兼容低版本浏览器，这样我们敲起项目来就会非常方便。