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