html - sass 不导入我的文件

Question

我正在为 SASS 使用 Gulp，但无法导入我的文件“_sections.scss”。 错误信息: 错误:scss\main.scss 错误:找不到或无法读取要导入的文件:_sections.scss。

我在 sass 文件夹中的文件列表是这种形式:

  _base.scss
  _header.scss
  _mixins.scss
  _nav.scss
  _sections.scss

我以这种形式导入了 main.scss:

@import "_base";
@import "_mixins";
@import "_sections";
@import "_header";
@import "_nav";

Gulp 文件:

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function() {
    gulp.src('./scss/main.scss')
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(gulp.dest('./css'))
        .pipe(browserSync.reload({ stream: true }));
});

gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: './'
        }
    });
    gulp.watch('./scss/*.scss', ['styles']);
    gulp.watch('./**/*.html').on('change', browserSync.reload);
});

gulp.task('default', ['styles', 'serve']);

Answer 1

你应该在使用 gulp-sass 时捕获错误

所以你的代码看起来像

.pipe(sass().on('error', sass.logError))

捕获错误并再次编译文件应该可以。 如果您使用的是 Visual Studio 代码。我认为这个问题有一个线索。

https://github.com/sass/node-sass/issues/1894