錯誤：找不到導入文件或不可讀：基礎

Question

我的項目結構：

project
  assets
    scripts
    styles
      foundation
        _settings.scss
      app.scss
  bower_components
  node_modules
  public
    css
      app.min.css
    js
  bower.json
  gulpfile.js
  package.json

我使用gulp-sass將app.scss編譯為app.min.css，我希望將基礎scss文件包含在我的app.scss中

這是gulpfile.js：

gulp.task('styles', function() {
    return gulp.src('./assets/styles/app.scss')
    .pipe(sass({
        includePaths: ['./bower_components/foundation/scss']
    }))
    .pipe(autoprefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(concat('app.min.css'))
    .pipe(minifyCss())
    .pipe(gulp.dest('./public/css'))
    .pipe(connect.reload());
});

和app.scss：

@import 'foundation/settings';
@import 'foundation';

當我更改_settings.scss並運行gulp時，所有更改都將保存並編譯。 但是當gulp正在觀看app.scss時，我在_settings.scss中進行了更改，會收到以下錯誤：

Error: assets\styles\app.scss
  1:9  file to import not found or unreadable: foundation/settings
Current dir:
    at options.error (D:\Dropbox\foundation-project\node_modules\gulp-sass\node_modules\node-sass\lib\index.js:276:32)

最令人困惑的事情是，有時我在運行gulp時會遇到相同的錯誤，有時即使gulp還在app.scss上也不會出現此錯誤

Answer 1

您的項目將編譯並運行。

我在phpStorm上收到了相同的警報，它呈現的很好，但是有一點沒有加載基礎框架css。 為了解決這個問題，我做了以下工作：

1） settings.scss在行上添加' '-@import'foundation / _functions'; 2）在app.scss中添加以下導入：@import'foundation';