之前一直使用angular写项目,css使用SCSS。后来用VUE写CSS,习惯了SCSS后总觉得不方便。但是由于VUE本身不支持SCSS写法,所以需要安装vue-loader才能在VUE文件和样式文件中使用SCSS。于是就有了这个记录。首先是官方介绍文档introduction|VueLoadervue-loader.vuejs.orgnpminstall-Dvue-loadervue-template-compilernpminstall-Dsass-loadernode-sass我没有webpack.config.js这个文件,只有三个文件所以修改webpack.base.conf.js。//base是另外两个的publicjs,所以这里修改一下。用这个替换规则中的代码{test:/.sass$/,use:['vue-style-loader','css-loader',{loader:'sass-loader',options:{indentedSyntax:true,//sass-loaderversion>=8sassOptions:{indentedSyntax:true}}}]}然后npmrundev会报Error:Cannotfindmodule'vue-loader/lib/plugin'becausethereisnoThereisaplugin,allreport这个问题。解决方法是在package.json中将vue-loader的版本改为^15.9.2"vue-loader":"^15.9.2",然后升级本地的vue-loadernpminstall--force然后npmrundev即可运行代码会报(二度)TypeError:this.cacheableisnotafunctionssass-loader版本太高,没有可缓存的函数,替换为^7.3.1"sass-loader":"^7.3.1”,这很好,在VUE文件中使用时请记住。
