Gulp:无法将波旁威士忌导入样式表

Question

我最近对我的package.json进行了更新。将波旁威士忌导入我的 scss 样式表后，我遇到了以下Error: File to import not found or unreadable: bourbon。

在我的节点模块中，我可以看到我有一个波旁威士忌和波旁威士忌文件夹。

我需要了解并修复我目前正在从事的项目，以便任何帮助将不胜感激。

包.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"
}

古尔普文件.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。没有任何重大更改，因此您应该不会有任何问题。

---

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

下面是两个示例，说明它是如何工作的。

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应该是一个数组，其中包含对波旁威士忌和整洁的直接引用。

其吞噬文件如下。

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