之前始终应用angular写我的项目，css应用的是SCSS。

起初应用VUE写CSS，写习惯 SCSS 后总感觉不不便。但因为 VUE 自身不反对 SCSS 写法，须要装置vue-loader能力在 VUE 文件及款式文件里应用 SCSS 。于是有了这次记录。

首先 官网的介绍文档

介绍 | Vue Loadervue-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">