Question

sass给出了错误消息

Error: File to import not found or unreadable: helpers/mixins.scss
   Parent style sheet: .../temp/styles/all.scss
    on line 1 of temp/styles/all.scss
>> @import 'helpers/mixins.scss';
   ^

此时，代码看起来像

@import 'helpers/mixins.scss';
@import 'helpers/variables.scss';
@import 'helpers/fonts.scss';
@import '../../node_modules/bootstrap/scss/bootstrap';
@import '../../node_modules/fotorama/fotorama.css';

.navbar {
  @extend navbar-light;
  @extend bg-faded;
}

gulp任务看起来像这样

var blocks = 'app/blocks/**/*.scss';

gulp.task('styles', () => (
gulp.src(['app/styles/app.scss', blocks])
    .pipe(concat('all.scss'))
    .pipe(sass({
        errLogToConsole: true,
        indentedSyntax: false
    }))
    .pipe(gulp.dest('temp/styles'))
));

如何解决这个问题？如何让galp正确理解方式？

Answer 1

在你的gulp文件中，你可以声明sass路径，例如

var sassPaths = [
  'node_modules/bootstrap/scss',
  'node_modules/fotorama'
];

这些与您的gulp文件有关。

然后在sass参数列表中设置包含路径

.pipe(sass({
    errLogToConsole: true,
    indentedSyntax: false,
    includePaths: sassPaths
}))

然后在你的sass中确保你的导入要么与父sass文件相关，要么相对于其中一个包含路径。

gulp sass相对路径

1 个答案: