@import в заявлении @if в Sass

Я хочу загрузить только 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).

Но я получаю сообщение об ошибке, что это невозможно. Директивы импорта не могут использоваться в директивах или миксах управления.

Ответ 1

Это одна из тех вещей, которые просто не разрешены. Единственное, что вы можете сделать, это превратить их в mixins (импортировать файл за пределами @if и при необходимости вызвать mixin).

Разъяснение:

_partial.scss

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

styles.scss

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

Ответ 2

Основная команда разработчиков неохотно реализует эту функцию, хотя они рассматривают внедрение новой системы зависимостей.

См. Следующие вопросы Github:

Ответ 3

Поместите свои стили в различные частичные файлы таким образом, который имеет смысл для вас. Затем вы можете создать отдельный файл SASS для своей страницы входа, который импортирует только файлы с соответствующими стилями.

Процитировать мой ответ на другой вопрос:

В настоящее время невозможно использовать SASS для динамического включения файлов. @import не может использоваться в директивах управления (например, @if) или mixins, использование переменной в директиве import является ошибочным синтаксисом, и не существует директивы для окончательного завершения файла (что эффективно позволит условный импорт). Однако вы можете решите свою проблему, изменив структуру правил стиля.

... Если у вас есть стили, которые [должны быть] условно включены [они] должен быть инкапсулирован в mixins, в файлах 'module' или 'library'.... Основная идея заключается в том, что импорт одного такого файла не выводит никаких CSS. Таким образом, вы можете импортировать эти файлы избыточно, чтобы вы могли использовать mixins, где бы вы ни нуждались.