记一次在vue中使用scss报错

1. 安装scss

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

npm install  style-loader css-loader --save-dev

2. 在build文件中找到webpack.base.conf.js， 配置如下：

?

1 2 3 4 5 6 7 8 9

{        test: /\.vue$/,        loader: 'vue-loader',        // options: vueLoaderConfig,        options: {          loaders: {            'scss': 'style-loader!css-loader!sass-loader'          }        }

　　

?

1 2 3 4

{        test: /\.scss$/,        loaders: ["style", "css", "sass"]          // 顺序不能乱      }

3. 觉得这样就ok了，可是运行时，报错

 

?

1 2 3 4

Module build failed: TypeError: this.getResolve is not a function     at Object.loader (C:\Users\BigBear\Desktop\vue_admintest\node_modules\_sass-loader@8.0.2@sass-loader\dist\index.js:52:26)    @ ./node_modules/_style-loader@1.1.3@style-loader/dist/cjs.js!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?<br>{"vue":true,"id":"data-v-7ba5bd90","scoped":true,"hasInlineConfig":false}!./node_modules/_sass-loader@8.0.2@sass-loader/dist/cjs.js!./<br>node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 2:26-345

一般这种情况就是说sass-loader当前的版本太高了，将其调低一点就行之前版本

 "sass-loader": "^8.0.2",

现在版本：

 "sass-loader": "^7.0.2",