Search code examples
sassgulppartialnode-sass

gulp-sass compiling bass scss file, but not partials


I'm new to Sass, so sorry if this is basic.

I'm compiling my main sass file using gulp, which works fine. However, I'm having trouble bringing in partials - I'm doing it wrong, but I can't figure out how.

style.scss

@import partial

$main-color: rgb(117, 0, 0);

h1 {
   color: $main-color;
}

h2 {
   color: $secondary-color;
}

_partial.scss

$secondary-color: rgb(175, 87, 205);

gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass');
gulp.task('default', function() {
   return gulp.src('style.scss')
      .pipe(sass(
         {outputStyle: 'compressed'})
         .on('error', sass.logError)
      )
      .pipe(gulp.dest('css'))
})

Do I need to add something to the gulp task to make it compile both the base scss file and the partial?


Solution

  • Line 1 of your style.scss should be @import 'partial';

    Sass requires the quotes and the semicolon (for the semicolon you may have been tripped up by the fact that .sass Sass wouldn't use that semicolon)