CODEWITHSUNDEEP
javascriptcsscompilationsassgulp
Cody Bentson
Cody Bentson

Reputation: 19

How to compile a .scss file that imports other .scss into one master css file using gulp

Task

I am attempting to compile a .scss file that is dependent on other .scss files into a single .css file using gulp.

Where I am

What I am currently working with is a directory similar to the generalized directory below. In the directory below, the global.scss file imports file1.scss, file2.scss, and file3.scss. 

sass
  |
  |-file1.scss
  |-file2.scss
  |-file3.scss
  |-global.scss

What I Was Hoping For

I was hoping that the gulp-sass task I wrote would see the imports and recognize the dependencies that this global.scss file had and compile everything accordingly. Here is the gulp.task I wrote:

gulp.task('global-styling', function() {
      gulp.src('src/resources/sass/global.scss')
          .pipe(sass().on('error', sass.logError()))
          .pipe(gulp.dest('dist/css/global.css'));
});

The Error I Get

This error is thrown because the variables from the files that global.scss is dependent upon never got compiled or even noticed.

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: src/resources/sass/global.scss
Error: Undefined variable: "$light-font".
        on line 110 of src/resources/sass/global.scss
>>     color: $light-font;
   -----------^

What I Need

If you haven't figured it out by now, I need to figure out how to write a gulp task that will create a single global.css file in my dist folder from the global.scss and its dependencies. Could someone please shed some light on how this is done using gulp.

Upvotes: 0

Views: 1371

Answers (1)

user5085788
user5085788

Reputation:

If you import everything in global.scss you shouldn't any have problems. I see an error in your sass.logError(), it's without (), also to gulp.dest you need to pass a folder path: .pipe(gulp.dest('dist/css/')); and it will create a file called global.css inside dist/css. Here is a working example:

gulpfile.js

const sass = require('gulp-sass');
const gulp = require('gulp');

gulp.task('global-styling', function() {
    gulp
        .src('./scss/base.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('dist/css'));
});

scss/global.scss

@import 'var';

body {
    background-color: $light-font;
}

scss/var.scss

$light-font: blue;

Output in dist/css/global.css

body {
  background-color: blue; }

gulpfile.js EDIT: with gulp-rename

const sass = require('gulp-sass');
const gulp = require('gulp');
const rename = require('gulp-rename');

gulp.task('global-styling', function() {
    gulp
        .src('./scss/base.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(rename('name.css'))
        .pipe(gulp.dest('dist/css'));
});

Upvotes: 1

Related Questions