在vue项目中使用scss及遇到的问题

迷南。 2023-05-31 02:47 109阅读 0赞

首先搭建一个vue项目之后在项目中用到了scss，报错如下：

*!!vue-style-loader!css-loader?{“sourceMap”:true}!../../../../vue-loader/lib/style-compiler/index?{“vue”:true,”id”:”data-v-570115ee”,”scoped”:false,”hasInlineConfig”:false}!../../../../vux-loader/src/after-less-loader.js!less-loader?{“sourceMap”:true}!../../../../vux-loader/src/style-loader.js!../../../../vue-loader/lib/selector?type=styles&index=0!./index.vue in ./node_modules/vux/src/components/alert/index.vue

解决方案：

  1. npm install node-sass --save-dev         //安装node-sass 
  2. npm install sass-loader --save-dev         //安装sass-loader 
  3. npm install style-loader --save-dev         //安装style-loader

安装完成后，运行时出现了错误

  1. Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

这是因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行，下面说一下修改方法，很简单，如下，找到package.json文件，里面的 “sass-loader”的版本更换掉 就行了。

  1. 我本地是将    "sass-loader": "^8.0.0"，更换成了 "sass-loader": "6.0.6",

重新跑项目，就运行成功了。

发表评论

表情：
评论列表 （有 0 条评论，109人围观）

还没有评论，来说两句吧...

相关阅读