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
    1 ноя 2015 в 9:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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