vue lang=“scss” 踩坑

vue中添加lang=“scss”报错

!!vue-style-loader!css-loader?{“sourceMap”:true}!../…/…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-3efc6188”,“scoped”:false,“hasInlineConfig”:false}!sass-loader?{“sourceMap”:true}!../…/…/node_modules/vue-loader/lib/selector?type=styles&index=0!./leftNav.vue in ./src/components/common/leftNav.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{“sourceMap”:true}!../…/…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-3efc6188”,“scoped”:false,“hasInlineConfig”:false}!sass-loader?{“sourceMap”:true}!../…/…/node_modules/vue-loader/lib/selector?type=styles&index=0!./leftNav.vue

没有安装node-sass npm i node-sass --S
如果安装完成仍然报错 尝试安装 npm install sass-loader --save-dev

这时候可能会报这个错误

TypeError: this.getResolve is not a function
at Object.loader (D:\code\study\vue\vuePos\posStore\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-3efc6188”,“scoped”:false,“hasInlineConfig”:false}!./node_modules/sass-loader/dist/cjs.js?{“sourceMap”:true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/common/leftNav.vue 4:14-385 13:3-17:5 14:22-393

这是由于sass-loader 的版本过高造成的 webpack编译时出现了错误，这个时候只需要换成低版本的就行
方法1 在本地的package.json文件，里面的 "sass-loader"的版本更换掉

"sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",

方法2 安装指定版本的 sass-loader

npm install sass-loader@7.3.1 --save-dev

如果已经安装，最好先卸载本地版本后在安装

npm uninstall sass-loader