CODEWITHSUNDEEP
phpcsslaravelvue.jssass
Alexis Jesus
Alexis Jesus

Reputation: 23

Laravel mix doesn't compile sass

I have a problem in my laravel mix configuration, I think. When I compile, it didn't emit app.css.


                                                                               Asset      Size                             Chunks             Chunk Names
                                                                        /css/app.css   0 bytes  /js/app, /js/manifest, /js/vendor  [emitted]  /js/app, /js/manifest, /js/vendor
                                                                          /js/app.js  6.61 MiB                            /js/app  [emitted]  /js/app
                                                                     /js/manifest.js  9.03 KiB                       /js/manifest  [emitted]  /js/manifest
                                                                       /js/vendor.js   885 KiB                         /js/vendor  [emitted]  /js/vendor
                                                                            about.js  15.2 KiB                              about  [emitted]  about
                                                                          arcicle.js  33.9 KiB                            arcicle  [emitted]  arcicle
                                                                        dashboard.js   8.9 KiB                          dashboard  [emitted]  dashboard
  fonts/vendor/@mdi/materialdesignicons-webfont.eot?3e2c1c7919fb45d5dee5b0703fe52931   842 KiB                                     [emitted]  
  fonts/vendor/@mdi/materialdesignicons-webfont.ttf?e7dec9c5e1bd830c084f2d2fb94fa1e7   842 KiB                                     [emitted]  
fonts/vendor/@mdi/materialdesignicons-webfont.woff2?a323c28ecd42189e70efca274f5b7089   276 KiB                                     [emitted]  
 fonts/vendor/@mdi/materialdesignicons-webfont.woff?2dcce27160495d68abf4945acd282448   390 KiB                                     [emitted]  
                                                                            login.js    32 KiB                              login  [emitted]  login
                                                                           logout.js  18.3 KiB                             logout  [emitted]  logout

However, if I try without the extract options, I get:


/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
   .sourceMaps()

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

It compiled!


98% after emitting SizeLimitsPlugin

 DONE  Compiled successfully in 6999ms                                                                                                                           13:46:28

                                                                               Asset       Size     Chunks             Chunk Names
                                                                        /css/app.css  142 bytes    /js/app  [emitted]  /js/app
                                                                          /js/app.js   7.45 MiB    /js/app  [emitted]  /js/app
                                                                            about.js   15.2 KiB      about  [emitted]  about
                                                                          arcicle.js   33.9 KiB    arcicle  [emitted]  arcicle
                                                                        dashboard.js    8.9 KiB  dashboard  [emitted]  dashboard
  fonts/vendor/@mdi/materialdesignicons-webfont.eot?3e2c1c7919fb45d5dee5b0703fe52931    842 KiB             [emitted]  
  fonts/vendor/@mdi/materialdesignicons-webfont.ttf?e7dec9c5e1bd830c084f2d2fb94fa1e7    842 KiB             [emitted]  
fonts/vendor/@mdi/materialdesignicons-webfont.woff2?a323c28ecd42189e70efca274f5b7089    276 KiB             [emitted]  
 fonts/vendor/@mdi/materialdesignicons-webfont.woff?2dcce27160495d68abf4945acd282448    390 KiB             [emitted]  
                                                                            login.js     32 KiB      login  [emitted]  login
                                                                           logout.js   18.3 KiB     logout  [emitted]  logout

I used vue and vuetify. I tried to find a solution, but I can't figure out what am I doing wrong...

Upvotes: 2

Views: 2796

Answers (1)

Aslam H
Aslam H

Reputation: 1801

I recently ran into this problem when using dynamic import and discovered that it was caused by "extract"

Dynamic imports aren’t supported in Mix. We’re on hold until webpack 5 is out.

Source: https://github.com/JeffreyWay/laravel-mix/releases?after=v4.0.6

as you said without the options extract it will compiled successfully. but what if I you want the extract there?

So here's a workaround.

Separate the webpack.mix.js file into two files

  1. webpack.mix.js | only to serve javascript compile. Delete every sass, less, or css.
  2. webpack.css.js | (or name whatever you want) - this one is only for css / sass / less. No javascript

Next step is to add new scripts into your package.json file

"css-watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --env.mixfile=webpack.css.js --config=node_modules/laravel-mix/setup/webpack.config.js",
"css-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --env.mixfile=webpack.css.js --config=node_modules/laravel-mix/setup/webpack.config.js",
"css-prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --env.mixfile=webpack.css.js --config=node_modules/laravel-mix/setup/webpack.config.js"

then you will need merge the old manifest file with the new one as it will be replaced every time you run npm.

here is a good package to handle merge manifest https://github.com/KABBOUCHI/laravel-mix-merge-manifest

Final step you can run npm run dev && npm run css-dev

Upvotes: 1

Related Questions