CODEWITHSUNDEEP
cssimportsassgulp
James Harrington
James Harrington

Reputation: 3226

gulp-sass import is silently failing

I am trying to transpile a scss file using gulp-scss.
When i run the task it doesn't seem to pick up the imports.

gulpfile.js

gulp.src('./app/css/app.scss', {base: './'})
    .pipe(sass({includePaths:'./node_modules/foundation-sites/scss'}))
    .pipe(gulp.dest('./web'));

app.scss

/*my custom styles*/
@import 'my-custom-styles';

// Sass utilities
@import 'util/util';

// Global variables and styles
@import 'global';

// Components
@import 'grid/grid';
etc.....

app.css

/*my custom styles*/
body{background:black;}

i am expecting app.css to be full of foundation code. Any ideas?

Edit: i'm getting no errors even though ive tried adding error handling. Console

[00:52:07] Using gulpfile ~/dev/rise-client/gulpfile.js [00:52:07] Starting 'scss'... [00:52:07] Finished 'scss' after 9.28 ms

Upvotes: 0

Views: 324

Answers (3)

James Harrington
James Harrington

Reputation: 3226

Ok so i was importing foundation wrong.

You must @import 'foundation';
not all the components. :/

Working scss file

@import 'foundation';

Upvotes: 0

Sven Schoenung
Sven Schoenung

Reputation: 30574

Looking at the files that you're importing it doesn't seem like they are actually styling any elements by themselves. All they contain is variables and @mixin and @function definitions. Unless you actually reference those in your own app.scss file, nothing from your imported files will end up in your compiled app.css.

For example, if you reference $warning-color in your app.scss like this:

@import 'util/util';
@import 'global';
@import 'grid/grid';

body {
  background:$warning-color;
}

You end up with a compiled app.css like this:

body {
  background: #ffae00;
}

So there's nothing wrong with your gulpfile. It's your SCSS that is at fault.

Upvotes: 0

ciriarte
ciriarte

Reputation: 1483

You probably have an error in your sources, try:

.pipe(sass(/* config */))
.on('error', function(err) { console.log(err); }))

Upvotes: 2

Related Questions