Sass中@if语句中的@import

本文介绍了Sass中@if语句中的@import的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I want to load only the css needed for the login page for performance. On my other pages I want a grouped css file that will be cached on every page which contain all my css.

我有以下文件:

minifiedcssforloginpage.scss
grouped-pages.scss

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

In minifiedcssforloginpage.scss I declare $load-complete-css:false. Afterwards I import myproject.scss which contains all the imports of my modules, layouts, core... In myproject.scss i want to do something like

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

因此 minifiedcssforloginpage.scss 将生成 minifiedcssforloginpage.css ，其 css 少于 grouped-pages.css(var $load-complete-css 设置为 true).

So minifiedcssforloginpage.scss would generate minifiedcssforloginpage.css with less css then grouped-pages.css (that has a var $load-complete-css set to true).

但我收到一个错误，提示这是不可能的导入指令可能不能在控制指令或混合指令中使用".

But I get an error that this is not possible "Import directives may not be used within control directives or mixins".

推荐答案

这是不允许的事情之一.您唯一能做的就是将这些导入转换为 mixin(在 @if 之外导入文件并在适当的地方调用 mixin).

It's one of those things that's just not allowed. The only thing you can do is turn those imports into mixins (import the file outside the @if and call the mixin where appropriate).

澄清:

_partial.scss

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

styles.scss

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

这篇关于Sass中@if语句中的@import的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！