How to combine SASS/SCSS files and CSS files into a single CSS file in laravel mix?

Question

I'm trying to combine few SASS files and CSS files into a single CSS file in the Laravel mix but I could not find how.

here is a sample laravel mix that I'm trying to use which return errors:

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

Apparently, it's not possible to combine a SASS file and CSS into a single CSS directly since one will overwrite the other one. Guess the best solution is to compile all SASS into one file and combine all CSS into a separate file then combine them together. — Shan
– Shan, Commented Oct 10, 2020 at 12:58

Rosh_LK · Accepted Answer · 2020-10-09 05:49:54Z

2

You can import the CSS file on the sass file, then compile only the main sass file if it’s feasible. found this which may help you: https://stackoverflow.com/questions/7111610/import-regular-css-file-in-scss-file#:~:text=It%20is%20now%20possible%20to,will%20import%20your%20file%20directly.
You can combine CSS files. here is an example I have used. maybe you can compile sass to CSS and later combine using this method?

please check the sample

//combine CSS    
    mix.styles([
        'resources/css/open-iconic-bootstrap.min.css',
        'resources/css/animate.css',
        'resources/css/bootstrap-datepicker.css',
    ], 'public/css/essentials.css');

for the completeness of the answer same kind of approach can be used to js files as follows,

// combine required js files
mix.combine([
        'resources/js/vendors/jquery-migrate.min.js',
        'resources/js/vendors/jquery.easing.1.3.js',
        'resources/js/vendors/bootstrap-datepicker.js',
        'resources/js/vendors/scrollax.min.js'
    ], 'public/js/essentials.js');

use this approach on your webpack.mix.js

edited Oct 9, 2020 at 5:49

answered Oct 9, 2020 at 5:29

Rosh_LK

6982 gold badges15 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shan Over a year ago

Apparently it's not possible to combine a SASS file and CSS into a single CSS directly since one will overwrite the other one. Guess the best solution is to compile all SASS into one file and combine all CSS into a separate file then combine them together.

Collectives™ on Stack Overflow

How to combine SASS/SCSS files and CSS files into a single CSS file in laravel mix?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related