Question

我从另一个sass文件中包含一个sass文件的maxin但是使用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; } 
} ... }

我是离子和SASS的新手，我正在做正确的包括或我缺少一些东西。从APP根目录直接构造两个文件 src / theme / main.scss＆gt;＆gt;＆gt; mixin在此文件中定义。
src / components / action-sheet / layout-1 / action-sheet-layout-1.scss＆gt;＆gt;＆gt; mixin进口。

Answer 1

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

前缀＆＃39; _＆＃39;告诉sass / scss编译器这个文件是部分。因此，编译器不会尝试编译该文件。

Sass partials

Answer 2

在您的SASS文件（action-sheet-layout-1.scss）的顶部，您需要添加：@import "../../../theme/main.scss"，然后您可以通过在css规则中执行main.scss来访问@include settingAnimationHeader;内的mixins你想在哪里申请这个混合

Answer 3

如果mixins是在 main.scss 中定义的，只需确保先导入文件，然后再在 action-sheet-layout-1.scss 中使用它们即可。在这种情况下。

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

3 个答案: