Question

谁能告诉我我做错了什么。我想在 @mixins 中进行媒体查询，但编译器抛出错误。 _mixin.scss

@mixin media-sm {
@media screen and (max-width:500px) {
    @content
}

}

main.scss

@import 'kalendarz';
@import 'mixins';

_kalendarz.scss

@include media-sm{
 .name {
        font-size: 20px;
        font-weight: 400;
        margin: 20px;
    }
}

错误

Error: no mixin named media-sm
        on line 102 of sass/c:\Users\Bartek\Documents\programowanie\Website-managing-driving-lessons\_kalendarz.scss
        from line 3 of sass/c:\Users\Bartek\Documents\programowanie\Website-managing-driving-lessons\main.scss
>> @include media-sm {

Answer 1

我对您的代码做了一些小的改进，例如 ; 中 @content 之后缺少的 _mixins.scss。但是，主要问题是，您在 media-sm 中使用了 _kalendarz.scss，而它仅导入到 main.scss。您只能在您 @include 的同一个文件中 @import 一个 mixin。

// _mixins.scss

@mixin media-sm {
  @media screen and (max-width: 500px) {
    @content;
  }
}

// _kalendarz.scss

@import "mixins"; // or preferably `@use "mixins";`, if Version: Dart Sass > 1.23.0

@include media-sm {
  .name {
    font-size: 20px;
    font-weight: 400;
    margin: 20px;
  }
}

// main.scss

@import "kalendarz";

scss编译问题，编译器看不到mixin

1 个答案: