Using gulp-ruby-sass to import parcels into source file during compile time

Question

My goal is to use one scss file with n number of asset partials to create n number of css stylesheets while using gulp-ruby-sass.

Here is an example of my directory structure:

- project_folder
   gulpfile.js
   - css
      _asset.scss
      style.scss

Inside "gulpfile.js" would have the following:

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');

gulp.task('build', function() {
    return sass([
            'css/_asset.scss',
            'css/**/*.scss'
        ])
        .pipe(gulp.dest('css'));
});

gulp.task('default', ['build']);

Inside "_asset.scss" would have the following:

$textColor: #444444;

Inside "style.scss" would have the following:

//@import "_asset";
.myTextColor {
    color: $textColor;
}

By running gulp I would get the error:

error css/style.scss (Line 3: Undefined variable: "$textColor".)

Let's say I was to uncomment line 1 in style.scss. Then running gulp should properly compile style.scss to create style.css, but uncommenting line 1 is not the answer I am looking for. I need gulp to use gulp-ruby-sass or some other plugin to do exactly what line 1 on style.scss is doing, or something like on to it, and get the same results.

P.S. (Hopefully, with this solution I can use 'gulp-rename' and be able to produce multiple css stylesheets using multiple asset files, and only use one scss file!)

Using gulp-ruby-sass to import parcels into source file during compile time

0 Answers0