背景:在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
@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