Laravel mix to compile multiple css files

Laravel mix to compile multiple css files

1) Create a laravel project. (for beginner)

2) If you go to public folder which is right on top of the resource folder. Inside public folder
there you will see two folders. One is for css and another is for Js. There is a app.css in a css folder.

The app.css file has been declared in the head section of app.blade.php which is inside the
resources->views->layouts folder.


3) Let's create a custom css file inside the public css folder. In our case we are naming
this as style.css


4) write any css as per your style in the style.css

(our motive is to mix all those css files into one css file. Laravel will get every css design
from that one css file)

5) Now open webpack.mix.js file which is present at the bottom of our laravel project.
 Or, type ctrl+p and write webpack.mix.js and open it.

6) In webpack.mix.js file you will see this:

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

7) Open laravel documentation in laravel.com and search compiling
Assets (Laravel Mix). At the top somewhere you will find # Plain CSS or type CTRL+F and write
plain css
and click on it.

8) Copy this:
mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

9) Paste the copied lines in the webpack.mix.js file. Like this:

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

mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

10) In our case we want to mix app.css and style.css file which is inside the public->css folder.

11) So we are changing
this:


mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

to:


mix.styles(
    ["public/css/app.css", "public/css/style.css"],
    "public/css/all.css"
);


12) Now, we need to install npm in our project.
 run this:

npm install

13)Now run npm:

npm run dev

14) This will create a all.css file inside the public->css folder.

in all.css file you will get the mixture of both app.css and style.css file.

at the bottom of the all.css file you will get the css styles of style.css file.


15) Last of all, open app.blade.php file and remove this:

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

and write:

    <link href="{{ asset('css/all.css') }}" rel="stylesheet">


That's it.


[Laravel Mix Documentation: https://laravel.com/docs/6.x/mix#installation]


Thanks.