sass-loader 无法解析 @use 规则答案

【问题标题】：sass-loader can't resolve @use rulesass-loader 无法解析 @use 规则
【发布时间】：2020-07-08 07:04:06
【问题描述】：

我正在开发一个 vuejs 应用程序，我正在尝试使用 prependData 中的 @use 规则在 sass-loader 中导入我的变量文件，但它似乎无法正常工作。使用 @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

【问题讨论】：

标签： vue.js sass sass-loader

【解决方案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.

【讨论】：