Sass 中 @if 语句中的 @import

我只想加载登录页面所需的 css 以提高性能。在我的其他页面上，我想要一个分组的 css 文件，该文件将缓存在包含所有 css 的每个页面上。

我有以下文件：

minifiedcssforloginpage.scss
grouped-pages.scss

在 minifiedcssforloginpage.scss 中，我声明 $load-complete-css:false。之后我导入 myproject.scss，其中包含我的模块、布局、核心的所有导入...在 myproject.scss 中我想做类似的事情

@if $load-complete-css {
     @import module1;
     @import module2;
     @import module3;
}

因此 minifiedcssforloginpage.scss 会生成 minifiedcssforloginpage.css，其 css 数量少于 grouped-pages.css （其 var $load-complete-css 设置为 true）。

但我得到一个错误，这是不可能的“导入指令不能在控制指令或混合中使用”。

这是不允许的事情之一。你唯一能做的就是将这些导入变成 mixin（将文件导入到@if并在适当的情况下调用 mixin）。

澄清：

_partial.scss

@mixin partial {
    .test { color: red }
    // other styles here
}

样式.scss

@import "partial";
@if $someval == true {
    @include partial;
}