如何在 Angular component.scss 文件中使用 SCSS mixins？

Question

你好吗？

如何在 Angular 组件中使用 scss mixin？

背景

我在 /src/styles/_mixins.css 中为我的 scss mixins 创建了一个文件，并将这个 mixins 文件导入到全局样式文件styles.scss中，如下所示

// styles.scss    
@use "variables";
@use "mixins";

然后在我的角度组件的year-events.component.scss文件中，我尝试像这样使用我的mixins

// year-events.component.scss
@use "mixins";
.events-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;

  @include mixins.screen-size('large') {
    grid-template-columns: repeat(4, 1fr)
  }
}

它不起作用，我收到此错误

Can't find stylesheet to import.
  ╷
1 │ @use "mixins";
  │ ^^^^^^^^^^^^^
  ╵
  src/app/calendar/components/year-events/year-events.component.scss 1:1  root stylesheet

因此，经过几次搜索后，它说要手动将 mixins 文件导入到我的组件的 .ts 文件中，我就是这么做的。

@Component({
  selector: 'app-year-events',
  standalone: true,
  imports: [
    EventCardComponent,
  ],
  templateUrl: './year-events.component.html',
  styleUrls: ['./year-events.component.scss', '/src/styles/_mixins.scss'], // added this
})
export class YearEventsComponent implements OnInit {}

但总是同样的错误。这是什么原因呢？不应该将某些内容导入全局样式文件styles.scss有利于所有组件吗？

我的声音_mixins.scss

//_mixins.scss    
@mixin screen-size($breakpoint) {
      @if $breakpoint == 'small' {
        @media (max-width: 600px) {
          @content
        }
      } @else if $breakpoint == 'medium' {
        @media (min-width: 768px) {
          @content
        }
      } @else if $breakpoint == 'large' {
        @media (min-width: 1024px) {
          @content
        }
      }
    }

澄清一下，当我在 styles.scss 文件中使用 mixin 时，它的工作原理如下

Answer 1

您需要指定

_mixins.scss

文件的相对路径。

@use "../../../../styles/mixins";

或者，您可以使用 includePaths

 中 

stylePreprocessorOptions 的

angular.json

属性：

"stylePreprocessorOptions": {
  "includePaths": ["src/styles"]
}

这允许您使用现有的组件代码：

@use "mixins";