Sass-loader无法解析@use规则。

Question

我正在开发一个Vue.js应用程序，并尝试在中使用@use规则和prependData导入我的变量文件，但似乎无法正常工作。使用@use导入不起作用，我收到有关变量的错误。但是使用@import一切都很好。我是否做错了什么或者对@use规则的概念有误解？

在prependData中使用@import工作正常：

css: {
  loaderOptions: {
    sass: {
      implementation: require('sass'),
      sassOptions: {
        indentedSyntax: true
      },
      // prependData: `@use '~abstracts/variables'` //this does not work
      prependData: `@import '~abstracts/variables'` //this works
    }
  }
}

使用@use命令无法生效：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
15 │     color: $chuck
   │            ^^^^^^
   ╵

我的package.json文件：

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

我的组件：

<style lang="sass">
    .title
        color: $chuck
</style>

我的variables.sass文件：

$chuck: #BADA55

TIA

- Pisandelli

Answer 1

我刚才明白了我所缺少的东西。

只需添加 "as *":

css: {
  loaderOptions: {
    sass: {
      implementation: require('sass'),
      sassOptions: {
        indentedSyntax: true
      },
      prependData: `@use '~abstracts/variables' as *`
    }
  }
}

I'm just getting used to this new way of using sass.

- Pisandelli

---

⚠️ prependData在v9中已更改为additionalData（请参阅更新日志）。 - vsync