Объединение множества файлов LESS в один файл LESS

Я делаю библиотеку, содержащую некоторые общие компоненты пользовательского интерфейса, своего рода Bootstrap. Предположим, у меня есть следующая структура файлов LESS:

button.less
checkbox.less
index.less
variables.less

Каждый файл стиля компонента имеет @import "variables.less";. Индексный файл импортирует все файлы компонентов. Теперь я хотел бы распространять файлы library.less и variable.less в пакет.

Как связать файл индекса? Раньше я объединял все файлы и удалял повторяющуюся строку @import "variables"; с помощью регулярных выражений, возможно, для этого есть Less API.


css twitter-bootstrap gulp less gulp-less
person Alexander Shutau    schedule 15.10.2017    source источник
comment
Нет, в Less нет средств для создания меньшего количества файлов. Так что для такого рода вещей вы сами. Кстати, нет причин удалять избыточный импорт (кроме того, чтобы сделать пакет более читабельным), так как любой последующий импорт того же файла в любом случае не будет иметь никакого эффекта (см. документы).   -  person seven-phases-max    schedule 15.10.2017

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете использовать less-bundle https://www.npmjs.com/package/less-bundle

// variables.less
@red: #ff0000;
@grey: #cccccc;

// button.less
@import 'variables.less';
.btn-danger {
     background: @color;
}

// checkbox.less
@import 'variables.less';
input[type='checkbox'] {
   background: @grey;
}

// index.less
@import 'button.less';
@import 'checkbox.less';

Вот основной код для этого.

// bundler.js
const path = require('path')
const bundle = require('less-bundle');
const srcFile = path.join(__dirname, './index.less');

bundle({
  src: srcFile,
  dest: path.join(__dirname, './bundle.less')
}, function (err, data) {
  console.log('Error Bundle', err, data);
});

Запустите bundler.js с помощью команды node bundler.js, и он создаст файл bundle.less, содержащий все стили.

// bundle.less
@red: #ff0000;
@grey: #cccccc;

.btn-danger {
     background: @color;
}

input[type='checkbox'] {
   background: @grey;
}
person Zohaib Ijaz    schedule 22.03.2018
comment
Это должен быть принятый ответ и адресован мой точный вариант использования. - person Ryan Killeen; 21.05.2018