关于vue.js:夏哥事件薄-VUE-使用-vueloader-报错及解决在vue里使用scss

之前始终应用 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">