@include 在 Scss 中给出转换失败错误

Question

@import "../../../styles/media-queries";

@mixin mobile-width {
  @include mobile {
    width: 100%;
  }
}

@mixin desktop-width {
  @include desktop {
    width: 464px;
  }
  @include tablet {
    width: 464px;
  }
}

@mixin desktop-tablet-properties {
  @include desktop {
    @content;
  }
  @include tablet {
    @content;
  }
}

@mixin mobile-properties {
  @include mobile {
    @content;
  }
}

.main-container {
  position: absolute;
  box-sizing: border-box;
  width: 100vw !important;

  //   @include desktop-tablet-properties {
  //     top: 165px;
  //   }

  @include desktop-tablet-properties {
  }
}

大家好，当我尝试在我的 Scss 中使用带有 @include 的 mixin 时，我变得很奇怪“错误：转换失败，出现 1 个错误：错误：未终止的字符串标记”。 当我评论 <@include> mixin 语句时，应用程序构建完美。

我在新的 angular 非生产环境中尝试了这个它有效。 此外，我尝试按照其中一篇帖子的建议在我的服务器 Json（在 angular.json 中）中添加 stylePreprocessorOptions，但无济于事。

有人可以帮忙吗？

谢谢

Answer 1

您可能需要与我们分享您的@mixin mobile以更好地调试问题。 Mixin 通常需要参数才能工作，因此请查看您的原始 mixin。

另外，我建议使用@use "../../../styles/media-queries" as *; 而不是@import 。