Question

我目前的代码：

gulp.task('_sass', function() {
    var files = [
        './vendor/bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss',
        './resources/assets/sass/main.scss',
        './vendor/bower_components/bootstrap-rating/bootstrap-rating.css',
        './vendor/bower_components/select2/select2.css'
    ];
    return gulp.src(files)
    //return gulp.src(files)
        .pipe(concat('all.css'))
        .pipe(sass())
        .on('error', notify.onError(function (error) {
            return "Error: " + error.message;
        }))
        .pipe(gulp.dest('./public/css/'))
        .pipe(reload({stream: true}));
});

正如你所看到的，我有一个文件数组，我将所有路径存储到我想要连接到all.css的.scss文件中。但是我得到了这个错误：

Error: file to import not found or unreadable: base/normalize
Current dir: /Users/**/Code/Laravel/vendor/bower_components/bootstrap-sass/assets/stylesheets/

这很明显，因为gulp使用数组的第一个路径作为它的基目录。我尝试将base或cwd设置为'./'，因此我可以指定我的Laravel根目录。但这不起作用。我怎样才能解决这个问题，所以我可以使用所有这些.scss文件而不将文件复制到其他目录？

Answer 1

这很棘手，因为你不需要相对于你的gulpfile的基本工作目录，而是相对于你所有的Sass组件。

我是对的，'./resources/assets/sass/main.scss'是您自己使用的主要Sass文件吗？如果是这样，我建议在那里导入bootstrap：

 @import '../../../vendor/bower_components/bootstrap-sass/assets/stylesheets/_bootstrap';

让Sass处理文件时，Sass通常在处理相对URL方面要好得多。

比我分拆Sass和CSS文件，稍后使用流队列捆绑它们：

var queue = require('streamqueue');

gulp.task('_sass', function() {
    return queue(
        // our CSS files
        gulp.src([
            './vendor/bower_components/bootstrap-rating/bootstrap-rating.css',
            './vendor/bower_components/select2/select2.css']
        ),
        // our Sass file, compiled to CSS
        gulp.src('./resources/assets/sass/main.scss')
            .pipe(sass())
    )
    // all the rest
    .pipe(concat('all.css'))
    .on('error', notify.onError(function (error) {
        return "Error: " + error.message;
    }))
    .pipe(gulp.dest('./public/css/'))
    .pipe(reload({stream: true}));
});

Gulp cwd项目根

1 个答案: