使用 SASS 的基础，使用 gulp 编译仅导入一个组件答案

【问题标题】：Foundation with SASS, compiled with gulp only importing one component使用 SASS 的基础，使用 gulp 编译仅导入一个组件
【发布时间】：2015-12-27 20:24:54
【问题描述】：

这是我当前的（相关部分）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 文件。

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

【问题讨论】：

在基础之前尝试@import "settings"，或阅读此foundation.zurb.com/docs/sass.html

标签： css sass gulp zurb-foundation

【解决方案1】：

检查foundation.scss文件，你需要初始化mixin可用，要么一个一个地调用它们，要么用foundation提供的乐趣全部调用它们：

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

希望这会有所帮助。

【讨论】：