Question

我刚刚跟上this教程没有问题，开始使用SASS。正如您所看到的，它包含一个使用指南针混合的部分。我已经编译了包含.scss的{{1}}个@import compass/css3/box-sizing文件。

现在我想编译我的.scss文件，但是使用Gulp。所以我遵循了this教程。所以现在我有这些文件：

//src/DefaultBundle/Resources/public/assets/css/main.scss
form {
  span {
    color: red;
  }
}

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('default', function() {
    gulp.src('src/DefaultBundle/Resources/public/assets/css/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('web/css'));
});

因此，当我按照后一个教程说的那样运行$ gulp时，我会得到.css文件。

问题：如果我在@import compass/css/box-sizing的顶部添加 .scss file ，则在运行$ gulp时会出现此错误：

[13:12:01] Working directory changed to /var/www/my_project
[13:12:01] Using gulpfile /var/www/my_project/gulpfile.js
[13:12:01] Starting 'default'...
[13:12:01] Finished 'default' after 5.37 ms

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: src/DefaultBundle/Resources/public/assets/css/main.scss
Error: File to import not found or unreadable: compass/css3/box-sizing
       Parent style sheet: stdin
        on line 2 of stdin
>> @import "compass/css3/box-sizing";
   ^

    at options.error (/var/www/my_project/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:277:32)

我在Ubuntu 15上。

Answer 1

试试THIS。您还可以使用includePaths选项添加任何部分：

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('default', function() {
    gulp.src('src/DefaultBundle/Resources/public/assets/css/main.scss')
        .pipe(sass({
             includePaths: ['./node_modules/compass-mixins/lib', './another/partials/location']
        }))
        .pipe(gulp.dest('web/css'));
});

Gulp：尝试导入罗盘mixins

1 个答案: