php - Laravel mix doesn't compile sass
Get the solution ↓↓↓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:
/*
|
It compiled!
{-code-3}
I used vue and vuetify. I tried to find a solution, but I can't figure out what am I doing wrong...
Answer
Answer
Solution:
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 thewebpack.mix.js
file into two files
- webpack.mix.js | only to serve javascript compile. Delete every sass, less, or css.
- 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 yourpackage.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 runnpm run dev && npm run css-dev
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: npm err! code 1
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.