css - 错误 : File to import not found or unreadable: foundation

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';