Question

我假设我是一个基本的gulp任务，该任务通过glob从两个路径中获取文件，将它们组合在一起，并将SASS结果生成到临时目录中

gulp.task("sass:development", cb => {
    //if (isProduction) return cb()

    const task = gulp
    .src([
        "./src/scss/styles.scss",
        "./src/modules/*/*.scss",
    ])
    .pipe(concat('styles.css'))
    .pipe(sass({outputStyle: 'compressed',}).on('error', sass.logError))
    .pipe(gulp.dest(gulpConfig.styles.tmp))
    .pipe(browserSync.stream())
    return task
})

文件结构如下。

gulpfile.babel.js
src
    ├── modules
    │   └── module-template
    │       ├── template.js
    │       └── template.scss
    └── scss
        ├── imports
        │   ├── _grid.scss
        │   ├── _reset.scss
        │   └── _variables.scss
        └── styles.scss

第一次编译工作正常，将scss及其变量正确生成到输出中。但是，如果我对模块下的scss文件进行了任何更改，则会收到以下错误；

Error: File to import not found or unreadable: imports/variables.
    on line 1 of src/modules/styles.css
>> @import "imports/variables";

styles.scss文件中仅包含@import语句。

@import "imports/variables";
@import "imports/reset";
@import "imports/grid";

如果我只是在IDE中的imports文件夹上触发了save函数，则该任务将再次成功运行，但是对modules文件的进一步更改将继续触发该问题。

我不确定这可能是什么原因，但是它几乎就像是导入文件被某种方式锁定了一样？

保存后gulp-sass无法导入

0 个答案: