Gulp：无法将 Bourbon 导入样式表

Question

我最近对我的 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']);

Answer 1

这可能是软件包的错误。 node-neat 和 node-bourbon 不是官方包。尝试将它们换成 bourbon 和 bourbon-neat。

您可能还想将整洁更新为2.1。没有任何重大更改，因此您应该没有任何问题。

---

更新：
此外，不需要在 sass importPaths 中添加波旁威士忌和纯咖啡，这可能是导致问题的原因。 Neat 的贡献页面与您尝试做的设置非常相似。查看https://github.com/thoughtbot/bitters/blob/master/Gulpfile.js，这是一个使用 Neat 和 bourbon 的正常运行的 gulpfile。

根据您的示例，这里有两个例子来说明它是如何工作的。

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"]);
});