Question

我最近对package.json进行了更新。在将Bourbon导入我的scss样式表后，我遇到了以下Error: File to import not found or unreadable: 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的正常运行的gulp文件。

在给出您的示例的情况下，以下是两个如何工作的示例。

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

Gulp：无法将Bourbon导入样式表

1 个答案: