标签：node scss sass color loader 报错 variable

一、原项目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 方法。

三、 解决办法

将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>
*/

标签：node,scss,sass,color,loader,报错,variable
来源： https://blog.csdn.net/ddx2019/article/details/115352155

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。