vue项目安装scss以及报错的解决方法

1.安装sass依赖

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

如果运行之后项目报错

Module build failed: TypeError: this.getResolve is not a function
    at Object.loader (C:\Users\DELL\Desktop\fantastic-macarons\node_modules\sass-loader\dist\index.js:52:26)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-375 13:3-17:5 14:22-383
 @ ./src/components/HelloWorld.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

那是sass-loader 版本太高, 更换成 7.3.1

 npm uninstall sass-loader（卸载当前版本）
 npm install sass-loader@7.3.1 --save-dev

在build文件夹下的webpack.base.conf.js的rules里面添加配置

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

就可以在别的文件中引用

引入scss文件，使用

@import '../assets/scss/triangle.scss'

不用使用

@import url('../assets/scss/triangle.scss');

会产生报错