BilalHaidar's avatar

How Laravel-mix handles css?

Hi, I am trying to understand how Laravel-mix handles css when using a Vue.js app with Laravel.

For instance, how laravel-mix decides on the file to hold all captured css from the vue.js app? Is it true that it collects all the css, from the sass folder + whatever vue-loader produces and puts them in a css file?

I am trying to understand how laravel-mix works so that, I could include a second vue.js app inside laravel. So basically, I want one css file per app.

Thank you Bilal

0 likes
2 replies
david19's avatar

It compile all scss files to one css file. Same with Js Files.

BilalHaidar's avatar

Thanks, @david19!

I did some trials with the mix file. For instance, I added multiple SCSS files. Only the last one in the list is used to store the SCSS from the Vue components and other SCSS files.

For example:

mix .js('resources/assets/js/app.js', 'public/js') .js('resources/assets/js/admin-app.js', 'public/js') .webpackConfig({ resolve: { alias: { '@': __dirname + '/resources/assets/js', }, }, }) .sass('resources/assets/sass/app.scss', 'public/css') .sass('resources/assets/sass/admin-app.scss', 'public/css') .sass('resources/assets/sass/ITCSS/itcss.scss', 'public/css') .version();

The itcss.scss has all of the CSS in the app. If I switch the last two lines, then admin-app.scss has all of the CSS in the app. Is that a known behavior?

In addition, I have the following setup:

resources\js\app.js is the first Vue app. It has components and files under resources\js\components, resources\js\views, etc.

resources\js\admin-app.js is the second Vue app. It has components and files under resources\js\admin folder.

If I add styles to a single component inside resources\js\admin folder, then the final CSS file has the CSS collected from inside resources\js\admin folder. The files and folders belonging to the first app are ignored.

Any idea?

Please or to participate in this conversation.