У меня следующая структура папок:
*--main
|--template1
|--header.scss
|--body.scss
|--footer.scss
|--template2
|--header.scss
|--body.scss
|--footer.scss
|--footer
|--footer.scss
|--header
|--header-left.scss
|--header-right.scss
*--preload
|--base.scss
(но, конечно, в реальном проекте это намного сложнее)
preload/base.scss
файл по сути содержит директивы @import
для всех файловкоторый должен быть встроен в заголовок для более быстрой загрузки страницы (main.css
файл загружается в нижний колонтитул страницы):
@import '../main/header/header-left.scss';
@import '../main/header/header-right.scss';
@import '../main/banner/banner.scss';
@import '../main/banner/banner.scss';
@import '../main/template1/header.scss';
@import '../main/template2/header.scss';
обратите внимание, как footer.scss
и файлы SCSS без заголовка отсутствуют в предварительной загрузке.
В настоящее время я генерирую небольшой файл preload.css
, который встроен в <head>
и большой main.css
, на который ссылается нижний колонтитул страницы.Проблема здесь в том, что main.css
содержит все стили, которые preload.css
уже имеет.Я хотел бы иметь возможность исключить стили, которые уже были включены во встроенный CSS.Кто я могу сделать это с глотком?Я знаю, что могу явно исключить использование
gulp.src([
'!css/ignore.css',
, но проблема в том, что это приведет к дублированию: те же файлы будут определены сценарием сборки и в preload.scss
.У меня вопрос - можно ли перечислить @import
директивы и передать этот список как-нибудь, чтобы исключить его из сборки?