升级到v3后，sass中的data选项在gatsby-plugin-sass中停止工作，并用sass替换了node-sass

问题描述

我决定从我的gatsby项目中删除 node-sass ，而改用 sass .我在此处中提到了v3.我删除了 node-sass ，现在我的 package.json 中有这些版本:

I decided to remove node-sass from my gatsby project and use sass instead. I followed what is mentioned here for v3. I removed node-sass and now I have these versions in my package.json:

"gatsby-plugin-sass": "3.1.0",
"sass": "1.32.5",

我需要能够一次为全局变量/mixins/函数编写一些@use或@import规则，以便可以在我的所有scss文件中使用它们，因此不必一遍又一遍地重复相同的规则再次.

I need to be able to write some @use or @import rules ONCE for global variables/mixins/functions so I can use them in all my scss files and so I won't have to repeat the same rules over and over again.

使用 node-sass 可以达到以下目的:

With node-sass something like this worked:

{
  resolve: `gatsby-plugin-sass`,
  options: {
    includePaths: [`${__dirname}/src/styles`],
    data: `@import "globals.scss";`,
  },
},

升级后， includePaths 属性确实起作用，但 data 无效，并且我从scss文件中收到有关丢失"消息的错误.变量:

After the upgrade, the includePaths attribute does work but the data does not and I get errors from my scss files about "missing" variables:

{
  resolve: `gatsby-plugin-sass`,
  options: {
    sassOptions: {
      includePaths: [`${__dirname}/src/styles`],
      data: `@use 'globals' as *;`,
    },
  },
},

如果我在每个scss文件中插入规则 @use'globals'作为*; ，错误消失并且一切都按预期进行，但我不想插入此行并修改我的所有sass文件.

If I insert the rule @use 'globals' as *; in each scss file the errors disappear and everything works as expected but I don't want to insert this line and modify all my sass files.

我非常确定问题与 sass-loader 和此声明有关(文档)，但我不知道如何使它起作用以及为什么它以前起作用:

I am pretty sure that the issue has to do with sass-loader and this statement (documentation) but I can't figure out how to make it work and why it worked before:

推荐答案

根据更改日志， data 选项已重命名为 prependData ，然后为了支持另外的数据.所以:

According to the changelog, data option has been renamed to prependData and then removed in favor of additionalData. So:

{
  resolve: `gatsby-plugin-sass`,
  options: {
    additionalData: `@use 'globals' as *;`,
    sassOptions: {
      includePaths: [`${__dirname}/src/styles`],
    },
  },
},

这篇关于升级到v3后，sass中的data选项在gatsby-plugin-sass中停止工作，并用sass替换了node-sass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！