Laravel микс не компилирует sass

Question

У меня проблема в моей laravel конфигурации микса, я думаю. Когда я компилировал, приложение не генерировало приложение. 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

Однако, если я попробую без параметров извлечения, я получу:

/*
 |--------------------------------------------------------------------------
 | 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')

Это скомпилировано!

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

Я использовал vue и vuetify. Я пытался найти решение, но не могу понять, что я делаю не так ...

Answer 1

Недавно я столкнулся с этой проблемой при использовании импорта Dynami c и обнаружил, что это вызвано «извлечением»

Импорт Dynami c не поддерживается в Mix. Мы приостановлены, пока не выйдет webpack 5.

Источник: https://github.com/JeffreyWay/laravel-mix/releases?after=v4.0.6

, как вы сказали, без извлечения опций он будет успешно скомпилирован. но что, если я захочу получить извлечение там?

Итак, вот обходной путь.

Разделите файл webpack.mix.js на два файла

1. webpack. микс. js | только служить javascript компиляции. Удалить каждый sass, меньше или css.
2. webpack. css. js | (или назовите как хотите) - это только для css / sass / less. Нет javascript

Следующим шагом является добавление новых скриптов в ваш package.json файл

"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"

, тогда вам нужно будет объединить старый файл манифеста с новым будет заменяться при каждом запуске npm.

. Вот хороший пакет для обработки манифеста слияния https://github.com/KABBOUCHI/laravel-mix-merge-manifest

Последний шаг, который вы можете запустить npm run dev && npm run css-dev