之前一直使用angular寫項目，css使用的是SCSS。

後來使用VUE寫CSS，寫習慣 SCSS 後總覺得不方便。但由於 VUE 本身不支持 SCSS 寫法，需要安裝vue-loader才能在 VUE 文件及樣式文件裏使用 SCSS 。於是有了這次記錄。

首先 官方的介紹文檔

介紹 | Vue Loader​vue-loader.vuejs.org

npm install -D vue-loader vue-template-compiler 

npm install -D sass-loader node-sass

我沒有 webpack.config.js 這個文件，只有三個文件

所以在 webpack.base.conf.js 內進行修改。

//base是另外兩個的公共js，所以在這裏修改。

rules 裏的代碼換成這段

{
  test: /.sass$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        indentedSyntax: true,
        // sass-loader version >= 8
        sassOptions: {
          indentedSyntax: true
        }
      }
    }
  ]
}

接着npm run dev 運行代碼就會報

Error: Cannot find module 'vue-loader/lib/plugin'

由於vue-loader包裏不存在plugin，所有報這個問題。

解決方法是在 package.json 裏把 vue-loader 的版本更換為 ^15.9.2

"vue-loader": "^15.9.2",

接着升級本地vue-loader

npm install --force

接着npm run dev 運行代碼就會報（二度)

TypeError: this.cacheable is not a function

sass-loader版本過高，沒有 cacheable 函數，替換為 ^7.3.1

 "sass-loader": "^7.3.1",

這樣就好了，在 VUE 文件裏使用時記得。

<style lang="scss">