首页 / VUE / vue2项目，用dart-sass替换node-sass报错

vue2项目，用dart-sass替换node-sass报错

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue2项目，用dart-sass替换node-sass报错，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1253字，纯文字阅读大概需要2分钟。

内容图文

一、原项目package.json的sass信息部分:

  "node-sass": "^4.12.0",
  "sass-loader": "^8.0.2",

二、用dart-sass替换node-sass

移除原项目的node-sass模块，并用dart-sass替代；命令如下：

yarn remove node-sass 
yarn add sass-loader sass -D

此时的package.json关于sass的信息 如下：

 "sass": "^1.32.8",
 "sass-loader": "^11.0.1",

启动项目，报错如下：
error in .vue?vue&type=style&index=0&lang=scss& Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function
我在项目中并未用到它报错的getOptions 方法。
vue2项目，用dart-sass替换node-sass报错 - 文章图片

三、 解决办法

将sass-loader降级为原项目的版本，成功。

yarn add sass-loader@8.0.2

 "sass": "^1.32.8",
 "sass-loader": "^8.0.2",

参考：https://stackoverflow.com/questions/58546521/node-sass-and-sass-loader-module-build-failed-typeerror-this-getresolve-is-n

四、配置sass全局变量

vue.config.js

module.exports={
	 css: {
    loaderOptions: {
      // variable.scss 文件放在src/assets/style/variable.scss ,里面是一些要用到的全局变量，
      sass: {
        prependData: `@import "@/assets/style/variable.scss" ;`
      }
    }
  }
}
/*
variable.scss的内容如下：
$icon_color: #5d7eb2;
$border_color: #ebeef5;
$header_bg: #409eff;
$title_bg: #f5f5f5;
它配置好以后，即可在任意组件中写sass的地方用了,如：
<style lang="scss">
  .my__icon {
    color: $icon_color;
    font-size: 18px;
  }
</style>
*/

内容总结

以上是互联网集市为您收集整理的vue2项目，用dart-sass替换node-sass报错全部内容，希望文章能够帮你解决vue2项目，用dart-sass替换node-sass报错所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/595416.html

来源：【匿名】