如何在 Angular 7 中使用 SCSS mixins答案

【问题标题】：How to use SCSS mixins with angular 7如何在 Angular 7 中使用 SCSS mixins
【发布时间】：2019-10-04 23:00:16
【问题描述】：

我在我的 Angular 项目中遇到此错误。

@include for-desktop-up {...." 没有为桌面命名的 mixin"

我在 styles.scss 中的代码是

@mixin for-desktop-up {
    @media (min-width: 1024px) { @content; }
}

我在组件样式表中的代码是

@include for-desktop-up {
    //some scss code
}

我做错了什么或发生了什么？

【问题讨论】：

【解决方案1】：

将component.ts中的文件导入为

styleUrls: ['./styles.scss']

或

在component.scss中使用SASS/SCSS import导入

@import "styles.scss";

【讨论】：

考虑到我的 style.scss 有其他样式代码，如果我将它导入到多个组件中，这是否会使我的项目膨胀？
不，如果你导入 required 代码，它不会膨胀:)
你应该创建一个 mixin.scss 并在其中写入所有的 mixin 并导入它。而不是全局文件
这正是我要问的
为了澄清，通常我们如何避免膨胀是不要写任何导入时将写出的 sass 代码，即。实际的 css，在导入/共享文件中。仅包括 sass mixins、函数，即。导入/共享文件中的逻辑代码。如果只包含这些，则可以在其中多次导入它们，将任何 CSS 打印到构建中。如果包含实际的 css，它会将多余的 css 添加到输出包中。如果 mixin 或函数中有“真正的 css”也没关系——不会重复。