Question

我有一个依赖于Bootstrap的项目。我正在定制Boostrap变量，因此使用gulp对Bootstrap的LESS源进行自定义编译。我项目中其余的CSS都是用SASS编写的。我有一个imports.sass文件，其中包含以下行：

@import '../bootstrap/compiled/custom-bootstrap';

我要做的是将Bootstrap LESS编译为CSS，然后运行SASS任务以创建包含已编译的Bootstrap CSS的CSS文件。我实现这一目标的2项任务如下：

gulp.task('bootstrap', function () {
    return gulp
        .src('assets/bootstrap/custom-bootstrap.less')
        .pipe(less())
        .pipe(gulp.dest('assets/bootstrap/compiled'));
});

gulp.task('sass', function () {
    return gulp
        .src('assets/scss/*.scss')
        .pipe(sass({
            includePaths: ['assets/bootstrap/compiled']
        }).on('error', sass.logError))
        .pipe(gulp.dest('assets/css'));
});

我第一次运行它时，引导任务成功完成，但是sass任务抛出了这个错误：

Error in plugin 'sass' Message:
    assets\scss\_imports.scss Error: File to import not found or unreadable: ../bootstrap/compiled/custom-bootstrap
       Parent style sheet: [path/to]/assets/scss/_imports.scss
        on line 5 of assets/scss/_imports.scss
>> @import '../bootstrap/compiled/custom-bootstrap';
   ^

当我第二次运行它时，两次都成功完成，所以问题是在初始运行开始时不存在custom-bootstrap.css。但是，您可以看到我添加了相关的includePaths选项，这似乎是SO上其他类似问题的解决方案。也许我没有正确指定这条路径？

要完成所需的信息，请参阅我的解决方案结构，详细说明相关文件。我相信我使用的路径是正确的，以防万一我错过了什么......

资产
- 自举
  - 定制bootstrap.less
  - 定制variables.less
- SCSS
  - _imports.scss
  - main.scss
gulpfile.js

如果它是相关的，这是ASP.NET解决方案的前端，所以我使用Visual Studio的任务运行器来执行gulp任务，这也解释了为什么gulpfile.js在项目的根目录中

为什么不能gulp编译一个SASS文件，该文件导入由前一个gulp任务创建的CSS文件？

0 个答案: