Compiling SASS and Plain CSS into a single CSS file

What is the simplest way to compile SASS and Plain CSS files into a single CSS file? For example, I have installed animate.css:

npm install animate.css --save

and now what? For example:

elixir(mix => {
    mix.sass('app.scss')
        .styles([
            'node_modules/animate.css/animate.css'
        ])
       .webpack('app.js');
});

... this will create two separate CSS files:

public\css\app.css
public\css\all.css

But what if we want to have one CSS file?

twg_

9 years ago

Level 6

You can always install gulp-concat and then include it in your gulp file to combine them after you SASS has been compiled.

1 like

ejdelmonico

9 years ago

Best Answer

Level 53

You can just change the css extension to scss, import it and use mix.sass. I do it all the time with libraries such as animate. I change the name to animate.scss and import as I mentioned.

3 likes

Filip_Zdravkovic

9 years ago

Level 7

@ejdelmonico Thanks, that's probably the simplest way (didn't find any better solution). As far as I can see, if you are using SASS and if you need some "pure" CSS library (such as Animate.css) - there is no point in using npm, it's much better to download it to somewhere like resources/assets/css/libs (and change the css extension to scss...).

OwenMelbz

9 years ago

Level 4

I use animate.css and sass. However we use the source e.g

app.css has


@import 'node_modules/animate.css/source/base';
@import 'node_modules/animate.css/source/sliding_entrances/slideInDown';
@import 'node_modules/animate.css/source/sliding_exits/slideOutUp';

1 like

iceberg53

7 years ago

Level 1

This is just a step by step version of @ejdelmonico 's answer.

Save the content of public/css/custome.css in resources/assets/sass/_custome.scss

You have to change the file extension to .scss and add an underscore at the beginning. The underscore will be useful when importing in your main app.scss file.

Import your resources/assets/sass/_custome.scss file into your resources/assets/sass/app.scss this way :

/* importing _custome.scss from the same directory containing the following files 
   resources/assets/sass/{app.scss, _custome.scss, _variables.scss} */

// import _custome.scss
@import "custome";

// import _variables.scss (custom variables for bootstrap-sass)
@import "variables";

// importing bootstrap-sass from node modules (if you are using bootstrap)
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

Include this in your webpack.mix.js file

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');

Compile with
```
npm run dev
```

Please or to participate in this conversation.