CODEWITHSUNDEEP
csssassgulpzurb-foundation
Andrew Liu
Andrew Liu

Reputation: 61

Foundation with SASS, compiled with gulp only importing one component

Here is my current (the relevant portion) 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());
});

With following main.scss:

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

here's the folder structure of the app/stylesheets folder:

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

The resulting main.css file after gulp processing ends up containing only the normalize.scss styles and what looks like the _tables.scss and _visibility.scss components.

I have tried using includePaths with gulp-sass and that didn't compile anything at all.

Also, importing the css rather than scss in the main.scss file works just fine, but I want to change the row-width setting to 100%, so I'd like to use the scss files.

All foundation files were left as is. Please help me understand why not all the components are importing! Thank you!

Upvotes: 2

Views: 353

Answers (1)

Flow Wolf
Flow Wolf

Reputation: 509

Check the foundation.scss file, you need to initialize the mixins to be available, either by calling them one by one or calling them all with the provided fun by foundation:

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

Hope this helps.

Upvotes: 1

Related Questions