如何将@mixin从一个sass文件包含到另一个文件夹中的另一个sass文件中。

Question

我将一个Sass文件中的maxin包含在另一个sass文件中，但使用ionic serve命令时出错。错误：“ Sass错误“ @include”后的CSS无效：预期的标识符是'“ ../../../theme/mai'”

代码：从文件中导入mixin

action-sheet-layout-1 { 
@include '../../../theme/main.scss' 
@include "settingAnimationHeader"; >>> this is imported mixin define in main.scss
[button-action-shit] 
   { z-index: 99999; right: 16px; top: 56px;
... }

mixin代码在main.scss中定义

@mixin  settingAnimationHeader { 
@keyframes headerOff { 
from { 
background-color: theme-colors('mainColors', 'primary'); 
} 
to {
 background-color: transparent; } 
} ... }

我对Ionic和SASS还是陌生的，是我在正确地进行包含，还是缺少某些东西。从APP根目录直接直接构建两个文件。
src / theme / main.scss >>> mixin在此文件中定义。
src / components / action-sheet / layout-1 / action-sheet-layout-1.scss >>>导入mixin。

Answer 1

2021年更新

Sass 团队不鼓励继续使用 @import 规则。Sass 将在未来几年内逐步淘汰它，并最终将其从语言中完全删除。更喜欢 @use 规则。

因此根据这里的情况，代码应该从

@import 'path/to/main.scss'//注意：确保你的 sass 部分名称以下划线（_）开头，这样 sass 就知道它不应该被编译成 css 文件，而且你也不需要包含扩展名，如此处所示，而是改变它

到

@use 'path/to/main' as m//其中“m”是您的partial 的引用变量或命名空间。顺便说一句，这是可选的，但建议这样做。

您可以在这里找到更多相关信息：Sass-docs/imports

Answer 2

在您的 SASS 文件 ( action-sheet-layout-1.scss)的顶部，您需要包括：@import "../../../theme/main.scss"然后您可以main.scss通过在@include settingAnimationHeader;要应用此 mixin 的 css 规则中执行操作来访问内部的 mixin

Answer 3

您可以将main.scss文件重命名为_main.scss

前缀_告诉sass / scss编译器该文件是局部文件。因此，编译器将不会尝试编译文件。

无礼的人