2

I have a list of SCSS partials organized by components that I am trying to compile individually with Gulp, but can't figure out how to do so.

Here is a partial list of files that I want to compile:

_header.scss
_button.scss
_navigation.scss

And I want to output these files in the same directory as

header.css
button.css
navigation.css

I am using gulp-sass in order to compile all of my SCSS files into a single file like so:

gulp.task('styles', function() {
  return gulp
    // Find all `.scss` files from the `stylesheets/` folder
    .src('./src/stylesheets/**/*.scss')
    // Run Sass on those files
    .pipe(sass({
      style: 'expanded',
    }).on('error', sass.logError))
    // Write the resulting CSS in the output folder
    .pipe(gulp.dest('build/stylesheets'))
});

Is there a way to create a separate Gulp task that would compile and output each file in a directory individually instead of combining them into one file at the end?

Thanks in advance.

procload
  • 162
  • 1
  • 9

1 Answers1

5

You need to rename the partial files remove the leading underscore. Sass normally wont generate the output file if the file name starts with _xxx.scss.

Documentation

The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.

You can rename the file to xxx.scss and still import into other files like partials.

karthick
  • 11,998
  • 6
  • 56
  • 88