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.

Rabush

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.');
    });
});

Blastula

Looks good. I'm not able to test this package at the moment since I've moved on, but it does appear to do what I was looking for. I'll mark your answer as the solution. – Rabush

Thanks. This was the solution for me. Meanwhile i've created pull request with fix checking files with underscore prefix if regular are not reachable. – Blastula

Yeah, I saw that. The beauty of open source. Thanks! – Rabush

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/'));
};

Unpretentious

Sorry, this didn't achieve what I was looking for. It didn't import the files that are marked as @import. I'll highlight the key part of my question above to make it more noticeable. – Rabush

Strange. If you set the src to base.scss which contains you're imports it will compile them out to whatever directory you wish all in one file. It's what I am using in my build system. – Unpretentious

@AnthonyF. Are you trying to create another import file from a file that contains imports? – Unpretentious

Yeah, still not working for me. Copied your task, and only changed the name of the source file and changed final.scss to 'final.scss' in order to get it to work. It only takes what's in base.scss and puts it into final.scss. I feel like you've maybe accidentally left out a step or something because there's no actual sass processing happening in your task? It only takes a source, renames it, and then puts it at the dest. – Rabush

@AnthonyF. I apologize! Please see the updated code. I forgot to have the sass task run. – Unpretentious

Still doesn't work: it compiles the SCSS -> CSS, which isn't what I want to happen. – Rabush

@AnthonyF. Check my updated answer. It should give you what you want now. You don't want to use an import file for what you're trying to accomplish. – Unpretentious