Compile multiple sass files to one css file

From the Elixir documentation.

Again, like the less method, you may compile multiple Sass files into a single CSS file, and even customize the output directory of the resulting CSS:

elixir(function(mix) {
    mix.sass([
        'app.scss',
        'controllers.scss'
    ], 'public/assets/css');
});

In your case, you'd have something like...

elixir(function(mix) {
    mix.sass([
        'app.scss',
        'buttons.scss'
    ]).version('css/app.css');
});

@JoeDawson thanks for replying.

I've already done that. the problem is that app.css contains only app.scss contents and not also the buttons.scss contents.

It compiles only one file.

Does terminal give you any errors? Does it provide some kind of output when you make a change to buttons.scss?

@JoeDawson Here's the output given when typing 'gulp':

[21:28:47] Using gulpfile /var/www/sports-application/gulpfile.js
[21:28:47] Starting 'default'...
[21:28:47] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/app.scss


Saving To...
   - _buttons.scss

[21:28:48] Finished 'default' after 946 ms
[21:28:48] gulp-notify: [Laravel Elixir] Sass Compiled!
[21:28:48] Finished 'sass' after 1.23 s
[21:28:48] Starting 'version'...

Fetching Version Source Files...
   - public/css/app.css


Saving To...
   - public/build

[21:28:48] Finished 'version' after 142 ms

Can you show me your gulpfile again please? I don't think you're using the correct syntax because it's trying to save to your buttons.scss file...

@JoeDawson sorry for hesitating. I had some urgent stuff to do. Note I am requiring the file _buttons.scss gulpfile:

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.sass('app.scss','_buttons.scss')
    .version('css/app.css');
});

No problem. You're not using the correct syntax, see my first reply. You need to wrap each your source files in square braces.

mix.sass(['app.scss', '_buttons.scss']).version('css/app.css');

ok I did it.

changed gulpfile to :

var elixir = require('laravel-elixir');

elixir(function(mix) {
  mix.sass(['app.scss', '_buttons.scss']).version('css/app.css');
});

next typed gulp in terminal. It says the sass compiled.

Now I have checked buttons.scss and maybe some of it shouldn't be there? I am not sure what's wrong yet.

here's the code of the file:

https://justpaste.it/ra5t

Thanks!!

Maybe specifying a full path would do the trick

var elixir = require('laravel-elixir');

elixir(function(mix) {
  mix.sass(['resources/assets/sass/app.scss', 'resources/assets/sass/_buttons.scss'], 'public/css/app.css').version('css/app.css');
});

@Mo7sin unfortunately it throws an error when running gulp.

Another option would be to compile just app.scss and in app.scss you can import the buttons sass file using

@import 'buttons.scss';

NOTE: even though the buttons starts with an underscore, you would remove the underscore in the import statement as shown above.

If you go with the approach I mentioned above, you could always move any SASS out of app.scss and into another file, maybe "_core.scss" for example. Then your entire app.scss file would only include imports where you can control the order of the output ...

@import 'core.scss';
@import 'buttons.scss';

Ok @ChristopherRaymond so I just should put buttons.scss under assets/sass folder, right?

I have this on the top of my app.scss file:

// @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import 'buttons.scss';

Furthermore, it returns an error when running gulp. Here's a screenshot:

http://imgland.net/?img=7Knbct.png

terminal:

[01:56:19] gulp-notify: [Laravel Elixir] Sass Compilation Failed: resources/assets/sass/app.scss
Error: It's not clear which file to import for '@import "buttons.scss"'.
       Candidates:
         buttons.scss
         _buttons.scss
       Please delete or rename all but one of these files.
        on line 2 of stdin
>> @import 'buttons.scss';
   ^

I have tried to rename the file to both "_buttons.scss" and "buttons.scss".

The file is located in assets/sass.

It looks like you have two files buttons.scss and _buttons.scss. Why?

I only have buttons.scss and app.scss files in my assets/sass folder. And in app.scss I only import buttons.scss:

@import 'buttons.scss';

gulpfile.js:

var elixir = require('laravel-elixir');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
    mix.sass([
        'app.scss',
    ], 'public/assets/css');
});

What else can I do?

Strange. I'm not really sure what's going on then. You can clean up your elixir call though ...

elixir(function(mix) {
    mix.sass('app.scss', 'public/assets/css/app.css');
});

You do have an extra comma in there. I don't know if that would have any impact. And since you're only compiling one file you can remove the brackets.

Look I have that buttons.scss file that imports another files as well. I feel like I should put them all together including another sub-folder contains more scss file.

screenshot of the folder (check out the buttons.scss file that imports all the other files you see):

http://2.1m.yt/uAJakJy.png

gonna let you know what's up later. I am off to sleep now. thank you all!

I think you are on the right track. My sass is broken down, some in sub directories, etc. In some cases I have a directory with several files so I create an index there that simply has import statements for the rest of the items in the directory so that the parent just has to import the index ... the index imports the other items.

Probably overkill for simple projects.

So yeah it's compiling now well.All I had to do is to import ALL scss files to the resources/assets/sass folder.That's because I am using a library and it has multiple files. I noticed it's requiring another files so that's where I had to move it all together.

Next compile using 'gulp' command.

Then you'd be able to see the code compiled into one 'app.css' file in public/assets/css folder.

I am curious, @osherdo. Did you have one file named buttons.scss or _buttons.scss?

Quoting from Sass guide:

A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file

So that might explain why it wasn't compiled to CSS file (and only app.scss was)