sass-loader 无法解析@use 规则
sass-loader can't resolve @use rule
我正在开发一个 vuejs 应用程序,我正在尝试使用 prependData
in sass-loader
中的 @use
规则导入我的变量文件,但它似乎无法正常工作.使用 @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
我刚刚弄清楚我错过了什么。
只需添加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.
我正在开发一个 vuejs 应用程序,我正在尝试使用 prependData
in sass-loader
中的 @use
规则导入我的变量文件,但它似乎无法正常工作.使用 @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
我刚刚弄清楚我错过了什么。
只需添加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.