sass-loader无法解析@use规则

我正在使用vuejs应用程序,正在尝试使用@useprependData内的sass-loader规则导入变量文件,但似乎无法正常工作。使用@use导入无效,并且我收到有关变量的错误信息。但是使用@import一切正常。我对@use规则做错了什么还是弄错了概念?

@import中使用prependData可以做到:

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

yunyun89 回答:sass-loader无法解析@use规则

我只是弄清楚了我所缺少的。

只需添加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.


本文链接:https://www.f2er.com/2567902.html

大家都在问