vue && scss

1.首先安装依赖

npm install node-sass sass-loader --save-dev

2.找到build中webpack.base.conf.js,在rules中添加scss规则

{test:/\.scss$/,loaders:['style','css','sass']}

3.在vue文件中使用

如果报错：this.getResolve is not a function，，，sass_loader版本太高级不兼容，降低版本

一、报错信息

在安装sass-loader,node-loader后 npm run dev 出现下面错误信息

Module build failed: TypeError: this.getResolve is not a function

    at Object.loader (F:\vue-workspace\demo\node_modules\sass-loader\dist\index.js:52:26)

二、解决办法

1.将package.json中的sass-loader的配置修改成低于8.0.0版本，我按照上述链接中的版本，修改成7.3.1

2.将安装的node_modules项目依赖删除，重新安装，将sass-loader版本变成7.3.1   

npm install [email protected]

3.重新运行项目 npm run dev

4.问题解决，并不会报错

导致的原因是sass-loader 8.0版本过高 不兼容

——————————————————————————————————————————————————————————————

或者

在vue项目全局中引入scss

1.全局引用时需要安装sass-resources-loader

npm install sass-resources-loader --save-dev

2.修改build中的utils.js

将

scss: generateLoaders('sass')

修改为

scss:generateLoaders('sass').concat({loader:'sass-resources-loader',options:{//你自己的scss全局文件的路径resources:path.resolve(__dirname,'../src/style/common.scss')}})