Steps for adding a custom css file to be compiled into the main css file (app.css) with laravel-mix and webpack.mix.js

custom-css-laravel-mix.md

1. Save the content of public/css/custom.css in resources/assets/sass/_custom.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.

2. Import your resources/assets/sass/_custom.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, _custom.scss, _variables.scss} */
   
   // import _custom.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";
   

3. 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');
   

4. Compile with

   npm run dev