编译 scss 时出现问题，编译器看不到 mixin

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:UsersBartekDocumentsprogramowanieWebsite-managing-driving-lessons_kalendarz.scss
from line 3 of sass/c:UsersBartekDocumentsprogramowanieWebsite-managing-driving-lessonsmain.scss
>> @include media-sm {

Answer 1

我对你的代码做了一些小的改进，比如_mixins.scss中@content之后缺失的;。然而，主要问题是，你在_kalendarz.scss中使用media-sm，而它只被导入到main.scss。你只能在你@import的文件中@include一个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";