如何将SCSS中的@import迁移为@use？实际场景求助

问题根源 #

用@use替代@import后，SCSS会创建隔离的模块作用域：原typography.scss中通过@include textClass生成的.text-medium、.text-button-label等类选择器，仅在模块内部可见，不属于模块导出的成员。你尝试的@include typo.text-medium（把类当成mixin）和@extend typo.text-medium（错误使用模块成员语法）自然都无法生效。

两种可行解决方法 #

方法1：保留全局排版类，直接@extend原类名 #

不需要修改typography.scss的核心逻辑，只需在组件中用@use引入模块后，直接@extend原来的类名即可（因为@use会编译模块内的全局类，这些类会出现在最终CSS中，作用域是全局的）：

组件SCSS代码：

@use '<path-to>/typography' as typo;

.whatsit-button {
  // 其他样式
  @extend .text-button-label;
  // 其他样式
}

注意事项

• 确保@use的路径正确，和原来@import的路径一致（Angular中可以用相对路径，比如@use 'src/styles/typography' as typo;）。
• 这种方法保留了原来的全局类，适合不想大幅重构的场景，但会存在全局类污染的风险。

方法2：重构为模块化mixin（推荐） #

更符合SCSS模块规范的做法是，把排版样式封装成可导出的mixin，让组件直接@include使用，避免依赖全局类。

修改typography.scss：

@use "@fontsource/rubik/400.css"; // regular
@use "@fontsource/rubik/500.css"; // medium
@use "@fontsource/rubik/600.css"; // semi-bold

:root {
  --ion-font-family: 'Rubik';
}

// 基础文本mixin（可选保留，用于生成全局类）
@mixin textClass($size, $prefix: 'text-', $class: '', $suffix: '', $tag: '') {
  $selector: '';

  @if $class =='' {
    $selector: '.#{$prefix}#{$suffix}';
  } @else {
    $selector: '.#{$class}';
  }

  @if $tag !='' {
    $selector: '#{$tag},#{$selector}';
  }

  #{'#{$selector}'} {
    font-family: var(--ion-font-family);
    font-size: #{$size};
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    @content;
  }
}

// 导出单独的排版样式mixin，供组件调用
@mixin headline {
  font-family: var(--ion-font-family);
  font-size: 42px;
  font-weight: 400;
  line-height: normal;
}

@mixin text-button-label {
  font-family: var(--ion-font-family);
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.32px;
  padding: 5.5px 0;
  text-transform: none !important;
}

@mixin text-medium {
  font-family: var(--ion-font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

// 可选：继续生成全局类，兼容原来的直接类名使用方式
@include textClass(42px, $class: headline, $tag: 'h1') {
  @include headline;
};

@include textClass(18px, $suffix: button-label) {
  @include text-button-label;
}

@include textClass(18px, $suffix: medium) {
  @include text-medium;
}

组件中使用方式：

@use '<path-to>/typography' as typo;

.whatsit-button {
  // 其他样式
  @include typo.text-button-label;
  // 其他样式
}

这种方法既保留了全局类的兼容性，又提供了模块化的调用方式，避免全局样式污染，更适合长期维护。

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