Gulp SASS - use @import without compiling scss & # 8594; 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 one .scss file with several @import statements and import / link all these @ imported files into one .scss that is not compiled in CSS?

Background information: I took the Bootstrap and FontAwesome database files. scss and combined them into one main .scss file. Now I want to get all the files in @import operations into a single .scss file.

Another option that I was thinking about is to simply use the concat tool, but then I do not need to manually specify each file that will be the concatenation in the gulp file? Correct me if I am wrong.

An example of what I'm looking for:

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

Import

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

Note that @import included in the final.scss file, but there is no compilation from SCSS -> CSS.

Answer 1

I came across the same problem. This one will help you. Although there are some drawbacks (forget about the file names with an underscore prefix - what I have found so far).

The npm package, which is specially created for this purpose.

Disclaimer: I am not going to explain how npm works, I assume that the author knows what the npm package is if he wants to use the gulp plugin. Please do not delete my answer only because I do not explicitly implicitly describe what is obvious to the person who was looking for the question. To exclude this answer as a missing context, I quote a description of the package.

import permission
allow @import instructions in style sheets

What does it do
What if you have smaller files or stylus files that you want to split together into the main file, without compilation in css? Just use the import solution and all your dreams will come true. All @import statements will be allowed, and you will be left with one file containing all your precious mixins, variables and declarations.

Using an import solution

 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. Now there are several that Gulp has been around for a while.

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

gulp - name for renaming 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 the task for your needs. In the example below, base.scss will be your scss file with all your @import instructions.

 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 base.scss, which already has its own import statements. The above method should work. We simply run the scss task in the provided file, rename it and move it to any dest directory.

Update 2

Saving variables will require the use of the concat method, since all sass plugins are only for compiling sass in css. You do not need to specify all of your files. Only variables first, and then you can run glob for all your custom sass. Just make sure that you follow the same folder structure as in the array below for the proper separation and organization of assets.

You also do not need to worry about saving the import file. This is not needed, and with this method there will be less.

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