Gulp SASS - Use @import without compiling scss -> css

Question

I know this is probably a weird question, but stick with me. :)

Is it possible to use gulp sass (or other gulp plugins) to read a single .scss file with multiple @import statements, and import/concat all those @import-ed files to a single .scss file that is not compiled to CSS?

Background information: I've taken the Bootstrap and FontAwesome base .scss files and combined them into a single master .scss file. I now want to get all the files in the @import statements into a single .scss file.

Another option I thought of was to just use a concat tool, but then wouldn't I have to manually specify each file to be concat-ed in the gulp file? Correct me if I'm wrong though.

Example of what I'm looking for:

//base.scss
@import foo;
@import bar;

Imports

//foo.scss
$my-font-size:20px;

And

//bar.scss
body {
  div {
    font-size:$my-font-size;
  }
}

To make

//final.scss
$my-font-size:20px;
body {
  div {
    font-size:$my-font-size;
  }
}

Notice that the @imports are included in the final.scss file, but there isn't any compilation from SCSS -> CSS.

Answer 1

I've stumbled upon the very same problem. This one is going to help You. Although has some flaws (forget about filenames prefixed with underscore - that's what i found till now).

the npm package that is build especially for this purpose

Disclaimer: I am not gonna explain how does the npm works, i assume author knows what is npm package if he wants to use gulp plugin. Please do not remove my answer just because i`m not unnecesarily explicitly describing what's obvious for person that aked a question. To prevent deletion of this answer as lacking context i'm quoting package description.

import resolve
resolve @import statements in stylesheets

What this does
What if you have some less or stylus files that you want to smash together into a master file, without compiling to css? Just use import-resolve and all your dreams will come true. All @import statements will be resolved and you'll be left with one file containing all your precious mixins, variables and declarations.

Using import-resolve

npm install import-resolve
// some-node-thing.js 
var importResolve = require('import-resolve');

// spits out a master dist file with all your wonderful stylesheet 
// things concatenated 
importResolve({
    "ext": "less",
    "pathToMain": "path/to/main.less",
    "output": "path/to/output.less"
});

// if you don't specify an output file, output accepts a callback parameter 
// and passes the concatenated file text 
var output = importResolve({
    "ext": "styl",
    "pathToMain": "path/to/main.styl"
}, function (output) {
    fs.writeFile('foo.styl', output, function (){
        console.log('did it myself.');
    });
});

Answer 2

Yes, you can use gulp-scss for this or gulp-ruby-sass. There are a few out there now that Gulp has been around for a while now.

gulp-sass to compile the sass files https://www.npmjs.com/package/gulp-sass

gulp-rename to to rename the files for the distribution folder https://www.npmjs.com/package/gulp-rename

In my case I am currently using gulp-scss. You can simply run a task for your needs like so. In the example below, base.scss would be your scss file with all of your @import statements.

var gulp   = require('gulp'),
    scss   = require('gulp-scss'),
    rename = require('gulp-rename');

gulp.task('sass', function () {
  gulp.src('base.scss')
    .pipe(scss())
    .pipe(rename('final.scss'))
    .pipe(gulp.dest('assets/css/'));
});

Update:

Assuming you already have the base.scss created that already has your import statements. The above method should be working. We simply run the scss task on the provided file, rename it, and move it into whatever your dest directory is.

Update 2

Retaining the variables will require you to use the concat method as all of the sass plugins are just for compiling sass to css. You won't need to specify all of your files. Just the variables first, and then you can run a glob for all of your custom sass. Just make sure you follow a similar folder structure that's in the array below for proper separation and organization of assets.

You won't need to worry about maintaining an import file either. There will be no need for it and there will be less to manage with this method.

var gulp   = require('gulp'),
    concat = require('gulp-concat');

var sassConcat = [
  'sass/variables.scss',
  'sass/modules/**/*.scss'
];

gulp.task('sass', function () {
  gulp.src(sassConcat)
  .pipe(concat('final.scss'))
  .pipe(gulp.dest('../assets/sass/'));
};