Как организовывать CSS-пакеты в рамках библиотек

Паттерн организации CSS-пакетов в рамках библиотек будет разобран на следующем примере.

Структура проекта

Создана библиотека _library, в которой лежит два контрола: Bar и Foo. Каждый контрол имеет свой less-файл.

Проблема

Каждый файл less будет скомпилирован в css, и при запуске на сайте эти css будут загружаться по отдельности.

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

Решение проблемы состоит из трёх шагов.

Решение

Шаг 1: Создание less-файла пакета библиотеки.

Создаём less-файл пакета библиотеки, в который делаем импорт всех контролов, входящих в библиотеку.

Шаг 2: Переименование less-файлов для отдельных контролов.

Переименовываем less-файлы отдельных контролов, добавляя в начале символ подчеркивания (_). Такое название говорит билдеру, что данный файл не надо компилировать в css.

Такое переименование дает нам следующее:

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

Шаг 3: В каждом контроле делаем импорт CSS-файла.

В каждом контроле делаем импорт именно css-файла библиотеки.

import 'css!MyModule/library';

Результат

Таким образом организован css-пакет для библиотеки.