如何将一个 sass 文件中的@mixin包含在不同文件夹中的另一个 sass 文件中

Question

我正在将一个 SASS 文件中的混音包含在另一个文件中，但我在使用离子serve命令时遇到错误：

Error: "Sass Error
Invalid CSS after " @include": expected identifier, was '"../../../theme/mai'"

这是我导入mixin的文件：

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

main.scss中定义的混合素：

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

我是离子和 SASS 的新手，我做的是对的还是我错过了什么？

应用程序根目录中两个文件的目录结构：

src/theme/main.scss # the mixin is defined in this file.
src/components/action-sheet/layout-1/action-sheet-layout-1.scss # the mixin is imported here.

Answer 1

在

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

Answer 2

> 2021 年更新

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

所以根据这里的情况，代码应该从

@import 'path/to/main.scss'//注意：确保以下划线(_(开头命名sass部分，这样sass知道它不应该编译为css文件，您也不需要包含扩展名，如下所示，而是更改它

自

@use 'path/to/main' as m//其中 'm' 是部分的引用变量或命名空间。顺便说一句，这是可选的，但建议使用。

你可以在这里找到更多关于它的信息：Sass-docs/imports

Answer 3

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

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

萨斯部分

Answer 4

如果在main.scss中定义了mixins，请确保在这种情况下在ie-action-sheet-layout-1.scss中使用文件之前导入文件。

Answer 5

用于角度应用

使用前缀创建或重命名文件_例如 _main.scss。这告诉 sass/scss 编译器这个文件是部分的。

_style.scss

$sizes: 3, 7, 20, 33,37,40;
@mixin width-classes {
  @each $i in $sizes {
    $width: $i +'% !important';
    .w-#{$i} {
      width: #{$width};
    }
  }
}
@include width-classes;

在另一个 scss 文件中，导入 scss 文件。app.scss

@import '../../../../../../style';