css - Foundation with SASS，用gulp编译只导入一个组件

Question

这是我当前的(相关部分)gulpfile:

gulp.task('styles', function() {
  return gulp.src('app/stylesheets/main.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(gulpif(production, cssmin()))
    .pipe(gulp.dest('public/css'))
    .pipe(livereload());
});

使用以下 main.scss:

@import "normalize";
@import "foundation";

这是 app/stylesheets 文件夹的文件夹结构:

-- app -- stylesheets ---foundation.scss
                       |-normalize.scss
                       |-main.scss
                       |-foundation-------_functions.scss
                                        |-_settings.scss
                                        |-_components/

gulp 处理后生成的 main.css 文件最终只包含 normalize.scss 样式以及看起来像 _tables.scss 和 _visibility.scss 的组件。

我试过将 includePaths 与 gulp-sass 一起使用，但根本没有编译任何东西。

此外，在 main.scss 文件中导入 css 而不是 scss 工作得很好，但我想将行宽设置更改为 100%，所以我想使用 scss 文件。

所有基础文件都保持原样。请帮助我理解为什么不是所有组件都在导入!谢谢!

Answer 1

检查 foundation.scss 文件，您需要初始化 mixin 以使其可用，可以通过一个一个地调用它们或使用 foundation 提供的 fun 调用它们:

@import 'foundation';
@include foundation-everything;

希望这对您有所帮助。