Laravel混合不编译sass

Question

我认为我的laravel混合配置有问题。当我编译时，它没有发出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

然而，如果我尝试不使用提取选项，我会得到：

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

我最近在使用动态导入时遇到了这个问题，发现它是由"提取"引起的

Mix中不支持动态导入。我们在等待webpack5出局。

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

正如您所说，如果没有选项提取，它将成功编译。但如果我你想在那里提取提取物呢？

所以这里有一个变通办法。

将webpack.mix.js文件分为两个文件

1. webpack.mix.js|仅用于javascript编译。删除所有sass、less或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