Vue中配置Sass

NPM中SASS的詳細指南

1.創建自己的Vue項目

2.按照Sass依賴包

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

因爲sass-loader需要node-sass和webpack 作爲peerDependency。

3.在build文件夾下的webpack.base.conf.js的rules裏面添加配置

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

4.在需要用到scss的XXX.vue文件的style標籤是寫入：lang="scss"

<style lang="scss">

隨便寫一下如下:

<template>
  <div id="app">
    <div class="container">
      <p>sass引入成功</p>
    </div>
  </div>
</template>
<style lang="scss">
  .container{
    width: 100px;
    height: 100px;
    background: yellow;
    p{
      color:red
    }
  }
</style>

5.運行起來看看效果(npm run dev)

【注：修改webpack文件之後，必須要重新啓動一下項目，不然是沒有效果的】