1

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');
Shan
  • 65
  • 1
  • 11
  • Try posting the errors. – Dragonsnap Oct 09 '20 at 05:22
  • 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 Oct 10 '20 at 12:58

1 Answers1

2

  1. 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.

  2. 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

Rosh_LK
  • 680
  • 1
  • 15
  • 36
  • 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 Oct 10 '20 at 12:57