关于css：SASS基础，仅使用gulp编译即可导入一个组件


Foundation with SASS, compiled with gulp only importing one component

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

1
2
3
4
5
6
7
8
9
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：

1
2
@import"normalize";
@import"foundation";

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

1
2
3
4
5
6
-- 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文件。

所有基础文件均保持不变。请帮助我了解为什么不是所有组件都在导入！谢谢！

相关讨论

检查foundation.scss文件，您需要初始化mixins可用，方法是一个接一个地调用它们，或者以Foundation提供的乐趣来全部调用它们：

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

希望这会有所帮助。