Gulp: невозможно импортировать Bourbon в таблицу стилей

Недавно я обновил свой package.json. После импорта Bourbon в мою таблицу стилей scss я столкнулся со следующим Error: File to import not found or unreadable: bourbon.

В моих узлах-модулях я вижу, что у меня есть папка bourbon-neat и bourbon.

Мне нужно понять и исправить это для проекта, над которым я сейчас работаю, поэтому любая помощь будет оценена.

Файл Package.json

"devDependencies": {
    "bourbon": "^4.3.4",
    "bourbon-neat": "^2.1.0",
    "browser-sync": "^2.18.13",
    "gulp": "^3.9.1",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^3.0.0"
  }

Gulpfile.js

// Looks insides node_modules for the following 
var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var plumber     = require('gulp-plumber');
var uglify      = require('gulp-uglify');
var bourbon     = require('bourbon').includePaths;
var neat        = require('bourbon-neat').includePaths;

var paths = {
    scss: [
        "source/scss/*.scss"
    ]
};

// Kick off server and watch html/scss
gulp.task('build', ['sass'],function(){
      browserSync.init({
        server: "./public"
    });

    gulp.watch('source/scss/**/*.scss',['sass']);
    gulp.watch('public/*.html').on('change', browserSync.reload);
});

// Compile Sass
gulp.task('sass', function(){
    return gulp.src(paths.scss)
        .pipe(sass({
            includePaths: ["styles"].concat(bourbon)
        }))
    .pipe(plumber()) // Prevents Gulp from tripping up
    .pipe(gulp.dest('public/css')) // save output in public css folder
    .pipe(browserSync.stream());
});

// Task Method
gulp.task('default', ['build']);

person Samuel    schedule 26.07.2017    source источник


Ответы (1)


Это может быть ошибка с пакетами. node-neat и node-bourbon не являются официальными пакетами. Попробуйте заменить их на bourbon и bourbon-neat.

Также вы, вероятно, захотите обновиться до 2.1. Критических изменений не было, так что проблем быть не должно.


Обновление:
Кроме того, добавление бурбона и эфирного масла в sass importPaths не требуется и, вероятно, вызывает проблемы. Страница вклада для Neat имеет очень похожую настройку на то, что вы пытаетесь сделать. Проверьте https://github.com/thoughtbot/bitters/blob/master/Gulpfile.js — правильно функционирующий gulpfile, использующий Neat и bourbon.

Вот два примера того, как это может работать, учитывая ваш пример.

var bourbon    = require("bourbon").includePaths,
autoprefix = require("gulp-autoprefixer"),
connect    = require("gulp-connect"),
gulp       = require("gulp"),
sass       = require("gulp-sass");

var paths = {
  scss: [
    "source/scss/*.scss"
  ]
};

gulp.task("sass", function () {
  return gulp.src(paths.scss)
    .pipe(sass({
      includePaths: ["styles"].concat(bourbon)
    }))
// etc…

Обновление 2:

Я создал и протестировал репозиторий, который правильно использует Gulp для запуска бурбона и чистых.

https://github.com/thoughtbot/gulp-bourbon-neat-example

Кажется, что исходный guplfile неправильно добавлял пути включения sass. includepaths должен быть массивом, включающим прямые ссылки на бурбон и опрятность.

Его gulpfile выглядит следующим образом.

var autoprefix = require("gulp-autoprefixer"),
    connect    = require("gulp-connect"),
    gulp       = require("gulp"),
    bourbon    = require("bourbon").includePaths,
    neat       = require("bourbon-neat").includePaths,
    sass       = require("gulp-sass");

var paths = {
  scss: ["./source/assets/stylesheets/**/*.scss"]
};

gulp.task("sass", function () {
  return gulp.src(paths.scss)
    .pipe(sass({
        sourcemaps: true,
        includePaths: [bourbon, neat]
    }))
    .pipe(autoprefix("last 2 versions"))
    .pipe(gulp.dest("./source/assets/stylesheets"))
    .pipe(connect.reload());
});

gulp.task("connect", function() {
  connect.server({
    root: "source",
    port: 8000,
    livereload: true
  });
});

gulp.task("default", ["sass", "connect"], function() {
  gulp.watch(paths.scss, ["sass"]);
});
person whmii    schedule 26.07.2017
comment
Последняя версия, которую вы рекомендовали для bourbon-neat, — здесь — 1.9.0. Может я неправильно это читаю? В любом случае, я сделал, как вы предложили node-neat и node-bourbon для bourbon-neat и bourbon. Все равно вылетает ошибка при импорте :( - person Samuel; 27.07.2017
comment
@samsos См. twitter.com/WHMII/status/885884355385712640 › NPM показывает «последние», но что они действительно имеют в виду «самый последний». Вы можете просмотреть все доступные версии с помощью npm view bourbon-neat versions - person whmii; 28.07.2017
comment
Я понимаю. Спасибо. Я попробовал ваше предложение и сделал обмены, но я все еще получаю следующую ошибку Error: File to import not found or unreadable: bourbon ... Это сводит меня с ума, лол - person Samuel; 30.07.2017
comment
@samos А, нашел (думаю). Вам не нужно включать бурбон и пиво в sass includePaths. Обновление исходного ответа. - person whmii; 31.07.2017
comment
includePaths — это массив, который вам нужно добавить, определяя его несколько раз, просто перезаписывая предыдущую запись. - person whmii; 31.07.2017
comment
Я попробовал ваше предложение (см. обновление выше), и теперь он не может импортировать Neat :( Я создал проблему в репозиторий Bourbon со ссылкой на полный исходный код. Я проверил Bitters, но не вижу Neat в этом gulpfile.js :s Извините за это. - person Samuel; 01.08.2017