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

Question

我将一个 SASS 文件中的 mixin 包含到另一个文件中，但是 ionic 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：

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

我是 ionic 和 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.

原文由 Abhitesh khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2021 年更新

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

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

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

至

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

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

原文由 Pixie Dust 发布，翻译遵循 CC BY-SA 4.0 许可协议