Есть ли способ экспортировать уникальный файл scss в модульные файлы css?

Question

Мне было интересно, есть ли в любом случае весь мой CSS в один Sass-файл, и скомпилировать его во множество CSS-файлов, например, по одному на страницу / шаблон / виджет.Может быть, есть плагин webpack, который это делает?

Конечная цель этого - оптимизировать мои CSS-исполнения без управления 10-15 CSS-файлами.

Я думаю о чем-то вроде:

@file main.css{
    html{
      //Some CSS
    }

    header{
      //Some CSS
    }
}

@file home.css{
    .homeContent{
      //Some CSS
    }
}

Скомпилирует в два файла: main.css и home.css.

У кого-нибудь есть инструмент для этого?Или какие методы вы используете для управления вашим CSS?

Answer 1

Я не уверен, что вижу здесь преимущество?Один файл с содержимым нескольких файлов только для того, чтобы вы могли иметь несколько выходных файлов.Я могу понять, что не хочу управлять 15 исходными файлами, но это кажется намного лучше, чем сложность одного файла, который на самом деле представляет собой 15 скомпилированных файлов.

Этот единственный файл будет очень трудным для поиска.В вашем примере кода вы, похоже, хотите организовать код по файлам в любом случае.

Возможно организовать SCSS по компонентам, а не по "страницам" (в зависимости от ваших реальных потребностей, конечно).Если для файла SCSS указан префикс подчеркивания _home.scss, он не будет генерировать файл CSS.Вы можете использовать это в своих интересах для организации вещей, а затем получить файл, который выводит именно то, что вам нужно, импортируя необходимые компоненты.

• components/_tables.scss
• components/_buttons.scss
• components/_images.scss
• и т. Д.

Затем в home.scss просто импортируйте то, что вам нужно:

@import 'components/tables;
@import 'components/buttons;

#home-content {
  background: red;
  //whatever else...
}