升级Angular 13后Sass文件出现@import规则不允许的错误求助

错误原因 #

升级到Angular 13后，项目默认使用的Dart Sass版本不再允许在选择器内部或**@if这类控制指令块内**使用@import规则。@import属于顶层规则，必须放在文件最外层，不能嵌套在任何选择器或条件判断结构中。

解决方案 #

方案1：将导入内容封装为混合宏（推荐） #

1. 修改../_appwork/include.scss文件，把所有样式内容包裹在混合宏里：

// _appwork/include.scss
@mixin appwork-styles {
  // 保留原文件的所有样式代码
}

2. 在你的主Sass文件中，通过调用混合宏实现条件嵌套：

@if $enable-light-style {
  .light-style {
    // 定义当前作用域内的变量
    $ui-star-empty-color: $gray-200;
    $ui-icon-border-color: $gray-100;
    // 调用混合宏引入样式
    @include appwork-styles;
  }
}

方案2：将@import移到顶层，结合全局变量覆盖 #

如果无法修改include.scss，可以把@import移到文件顶层，再通过全局变量覆盖实现需求：

// 先在文件顶层导入样式
@import "../_appwork/include";

@if $enable-light-style {
  .light-style {
    // 用!global标记变量为全局，覆盖导入文件中的对应变量
    $ui-star-empty-color: $gray-200 !global;
    $ui-icon-border-color: $gray-100 !global;
  }
}

注意：!global会改变变量的全局作用域，可能影响其他区域的样式，需谨慎使用。

内容的提问来源于stack exchange，提问作者az rnd