If statement @在Sass中的@if语句中导入

为了提高性能，我只想加载登录页面所需的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.scs将生成minifiedcssforloginpage.css，其css比grouped-pages.css少（其var$load complete css设置为true）

---

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

这是不允许的事情之一。您唯一能做的就是将这些导入转换为mixin（在

@if

之外导入文件，并在适当的地方调用mixin）

澄清：

_部分scss

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

styles.scss

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

---

以对您有意义的方式将您的样式放入各种文件中。然后，您可以为您的登录页面创建一个单独的SASS文件，该文件只导入具有相关样式的文件

引述另一个问题：

目前无法使用SASS动态包含文件。

@import

不能在控制指令中使用（例如

@if

）或 mixin，在导入指令中使用变量是错误的语法， 并且没有关于提前结束文件执行的指令（这 将允许有条件的导入）。但是，你可以 通过更改样式规则的结构来解决问题

。。。如果您有[应该]有条件包括的样式[它们] 应封装在mixin、“模块”或“库”文件中。。。 其主要思想是，导入一个这样的文件不会输出任何内容 css。这样，您就可以冗余地导入这些文件，以便使用 你需要的地方都有

---

核心开发团队不愿意实现这个特性，尽管他们正在考虑实现一个全新的依赖系统

---

请参阅以下Github问题：

---

不幸的是，目前没有一种方法可以将导入语句放在if块中

我知道的最接近的替代方法是使用

additionalData

字段将预处理器函数添加到您的网页

sass loader

config:

{
    loader: "sass-loader",
    options: {
        sassOptions: {
            includePaths: [...],
        },
        additionalData: (content: string, loaderContext)=>{
            // More info on available properties: https://webpack.js.org/api/loaders
            const {resourcePath, rootContext} = loaderContext;
            
            const finalPath = someCondition ? path1 : path2;
            return content.replace(/SomeDynamicPathPlaceholder/g, finalPath);
        },
    },
},

---

有关

附加数据

字段的更多信息，请参见此处：

但是，您确实了解SASS不是动态的，对吗？一旦编译完成，就是这样。没有任何状态改变或类似的事情。一旦用户登录，您就不能将

$loggedin

设置为true，因为CSS已经编译。是的，这是一个错误的命名。我改变了它，你的意思是：

@if$load complete css{@include othercomponents；}@mixin othercomponents{@import“module1”；@import“modules2”；}

？我现在也犯了同样的错误。。不可能在mixin中导入正确：所讨论的mixin也不能执行导入。如果要与

@if

一起使用，必须将文件的全部内容放入一个mixin中。一个页面有多少样式是专用的？拆分文件并导致两个HTTP请求可能比拥有一个包含所有内容的文件更糟糕。@cimmanon或not。较小的文件可以独立缓存。如果一个或另一个文件将被缓存以用于将来的页面加载，那么两个HTTP请求是没有问题的。我倾向于认为，目前流行的将整个站点的所有CSS和JS连接起来的做法是非常糟糕的，这是因为没有考虑如何正确地进行模块化。我对这个解决方案非常感兴趣——非常聪明的想法，谢谢！你知道他们为什么不愿意吗？这个功能现在对我非常有帮助。@Theppdev:您可能想看看@Github上正在进行的讨论，并为之做出贡献（请参阅上面的链接）。请求此功能的人越多，他们最终实现此功能的可能性就越大；-）是的，我有。这就是关键，“最终”。可能不会发生。我看到他们在构建某种新的依赖关系管理系统。但那是三年前的事了。看起来什么都没有发生。所以我没有真正理解这一点@TheHPdev：他们无法与用户的实际需求联系起来，也不愿意实现与动态依赖性一样重要的功能，这一直困扰着我很长一段时间，以至于我考虑编写自己的预处理器语言。。。这很糟糕，但我想如果我们想继续使用Sass，我们就必须忍受……确实如此。还是喜欢它而不是简单的CSS，虽然哈哈。