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，或者通过逐个调用它们或者通过基金会提供的所有乐趣来调用它们：

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

希望这有帮助。

使用SASS进行基础编译，仅使用gulp编译导入一个组件

1 个答案: