Question

我只想加载登录页面所需的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更少，然后是groups-pages.css（var $ load-complete-css设置为true）。

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

Answer 1

这是其中一项不允许的事情。您唯一能做的就是将这些导入转换为mixins（将文件导入@if之外并在适当的时候调用mixin。）

澄清：

_partial.scss

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

styles.scss

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

Answer 2

核心开发团队不愿意实施此功能，尽管他们正在考虑实施全新的依赖系统。

请参阅以下Github问题：

Answer 3

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

从my answer引用另一个问题：

目前无法使用SASS动态包含文件。   @import不能在控制指令中使用（例如@if）或   mixins，在import指令中使用变量是错误的语法，   并且没有提前结束文件执行的指令（其中   effectively允许条件导入）。但是，你可以   通过更改样式规则的结构来解决您的问题。

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

Answer 4

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

我知道的最接近的替代方法是使用additionalData字段向Webpack sass-loader配置中添加预处理器功能：

{
    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);
        },
    },
},

此处additionalData字段上的更多信息：https://webpack.js.org/loaders/sass-loader/#additionaldata

@smport在Sass的@if语句中

4 个答案:

请参阅以下Github问题：