Gulp错误：使用gulp-compass出现问题：必须从项目目录编译单个样式表。

Question

我尝试运行一个gulp任务以编译我的sass项目，但由于我创建了子文件夹app/assets/并将源文件放入其中，因此出现了问题。 之前，当sass和css文件夹与我的gulpfile在同一目录中时，它可以完美地运行。如果我在基础目录上运行compass watch命令，则没有问题，这仅限于gulp-compass。 输出如下：

Devnco: /Users/Devnco/Web/maquette ->gulp sass
[gulp] Using gulpfile ~/Web/maquette/gulpfile.js
[gulp] Starting 'sass'...
[gulp] Finished 'sass' after 6.12 ms
[gulp] You must compile individual stylesheets from the project directory.
[gulp] Plumber found unhandled error: [gulp] Error in plugin 'gulp-compass': Compass failed
[gulp] You must compile individual stylesheets from the project directory.
[gulp] Plumber found unhandled error: [gulp] Error in plugin 'gulp-compass': Compass failed
[gulp] You must compile individual stylesheets from the project directory.
[gulp] Plumber found unhandled error: [gulp] Error in plugin 'gulp-compass': Compass failed

我的 gulpfile.js：

var paths = {
    css: './app/assets/css',
    sass: './app/assets/sass/*.scss',
    js: './app/assets/js',
    images: './app/assets/images'
}

gulp.task('sass',function(){

    gulp.src(paths.sass)
        .pipe(plumber())
        .pipe(compass({
            css: paths.css,
            sass: paths.sass
        }))
        .pipe(gulp.dest(paths.css))
        .pipe(minifyCss())
        .pipe(rename({ extname: '.min.css'}))
        .pipe(gulp.dest(paths.css));
});

我的工作目录：

gulpfile.js
app/
    assets/
        fonts/
        images/
        sass/
        css/
    pages/
        etc…

以下是我使用的版本信息（最新）：

"devDependencies": {
  "gulp": "^3.6.2",
  "gulp-compass": "^1.1.9",
  "gulp-concat": "^2.2.0",
  "gulp-minify-css": "^0.3.4",
  "gulp-plumber": "^0.6.2",
  "gulp-rename": "^1.2.0"
}

我做了一些搜索，但仍然没有找到问题所在。

谢谢您的帮助。

- Devnco

Answer 1

我使用这个来编译我的Compass文件，它运行良好，这是从gulp-compass文档中得来的。

如果你没有使用config.rb。

var compass = require('gulp-compass'),
  path = require('path');

gulp.task('compass', function() {
  gulp.src('./src/*.scss')
  .pipe(compass({
    project: path.join(__dirname, 'assets'),
    css: 'css',
    sass: 'sass'
  }))
  .pipe(gulp.dest('app/assets/temp'));
});

如果您正在使用config.rb文件： 变量compass = require('gulp-compass');

gulp.task('compass', function() {
  gulp.src('./src/*.scss')
  .pipe(compass({
    config_file: './config.rb',
    css: 'stylesheets',
    sass: 'sass'
  }))
  .pipe(gulp.dest('app/assets/temp'));
});

- Lunatikzx

---

你会保留__dirname不变吗？还是会更新为你自己的目录名称？ - davidpauljunior

Answer 2

今晚我也遇到了这个问题。通过更改我的config.rb路径，我解决了它。尝试一下。

.pipe(compass({
  config_file: './config.rb',
  css: paths.css,
  sass: paths.sass
}))

如果您没有或不想使用config.rb，我认为您需要像“在没有config.rb的情况下加载配置”部分中所述那样设置项目根目录。https://www.npmjs.org/package/gulp-compass

- brianjhanson

Answer 3

我也遇到了这个问题，我发现项目路径需要指向包含具有CSS、SCSS文件夹的文件夹。例如：

app /
  - src /
      - css /
      - sass /

鉴于上述结构，您的配置应如下所示：

project: "app/src",
css: "css",
sass: "sass"

当我的项目路径高一级时，我遇到了错误，导致我的 CSS 属性看起来像这样："src/css"

- TJSimons