Sass的\`if语句中的\`import

if语句 CSS

宝儿

2020-03-23

我只想加载登录页面所需的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（将$ load-complete-css变量设置为true）。

但是我收到一个错误，那就是这是不可能的：“在控制指令或mixins中可能无法使用导入指令”。

第2762篇《Sass的\`if语句中的\`import》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
LEY小卤蛋Near 2020.03.23

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

请参阅以下Github问题：

樱前端 2020.03.23

这是不允许的事情之一。您唯一可以做的就是将这些导入转换为mixin（将文件导入外部，@if并在适当的地方调用mixin）。

澄清：

_partial.scss

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

styles.scss

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android