Sass - @import与@use

235 阅读1分钟

背景:在Angular17升级到19时,控制台出现warning

./src/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Warning on line 87, column 8 of file:///E:/fre/support/src/app/app.theme.scss:87:8: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: sass-lang.com/d/import

87 | @import "app/layout/components/toolbar/toolbar.theme";

表示@import将在Dart Sass 3.0.0中弃用

如何修正?

官方文档上给出建议,用@use替换@import image.png

@use与@import的共同点

@use与@import都是对样式表的导入,提供对函数,混入,变量的访问

命名空间

@use

作用范围只在加载它们的样式表中,无法添加到global范围中。
默认情况,模块的命名空间就是url(没有文件扩展名)的名字。

@use "styles"

或者你想为命名空间起个别名,比如一个文件里加载了多个相同命名空间的多个模块,你可以这样:

@use "src/styles" as aStyles;
@use "assets/styles" as bStyles;

不想为命名空间起名

@use "src/styles" as *;

@import

创建全局命名空间

load path

@use

路径区分大小写,Styles.scss和styles.scss是两个不同的模块。

文件路径要用正斜杠/,不能用反斜杠\.

URL需要包上引号。

@import也一样


参考地址:
Sass: @use
Sass: @import