0

Хочу собрать свой css из исходников twitter-bootstrap less файлов. Пытаюсь сделать так:

gulp.task('bootstrap', function(){
    gulp.src('./bower_components/bootstrap/less/**/*.less')
        .pipe(less())
        .pipe(gulp.dest('./'));
});

Выдает ошибку:

@alert-padding is undefined in file /home/www/blog.loc/web/laravel/bower_components/bootstrap/less/alerts.less line no. 10

Что нужно дописать в gulp-файл, чтоб все срослось?

1 ответ 1

4

Gulp тянет все файлы в порядке их расположения в папке (по алфавиту), где одним из первых идет файл alerts.less, в нем собственно и находится переменная @alert-padding. Однако все переменные объявляются в variables.less. Одним вариантом будет передача в Gulp одного файла, в котором явно указан порядок включения компонентов - собственно так делает сам Bootstrap - файл bootstrap.less из репозитория Bootstrap:

// bootstrap.less - фрагменты файла

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// ...

@import "alerts.less";
@import "progress-bars.less";
@import "media.less";

// ...

Т.е. чтобы просто врчную собрать Bootstrap, достаточно в Gulp передать сам файл bootstrap.less:

gulp.task('bootstrap', function(){
    gulp.src('./bower_components/bootstrap/less/bootstrap.less')
        .pipe(less())
        .pipe(gulp.dest('./'));
});

Либо напрямую подключить bootstrap.less в ваши .less файлы.

Еще одним вариантом будет указание правильно порядка файлов прямо в Gulp:

gulp.task('bootstrap', function(){
     gulp.src([
        './bower_components/bootstrap/less/variables.less',
        './bower_components/bootstrap/less/mixins.less',
        // ...
        './bower_components/bootstrap/less/alerts.less',
        './bower_components/bootstrap/less/progress-bars.less',
        './bower_components/bootstrap/less/media.less',
     ])
    .pipe(less())
    .pipe(gulp.dest('./'));
});
1
  • Спасибо большое. Нигде в сети не смог найти ответ. И, похоже, я его даже видел, перед глазами он мелькал, но я его не понял.
    – Razzwan
    Commented 1 нояб. 2015 в 9:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.