Laravel mix 不编译 sass

Posted 2023-02-22

【中文标题】Laravel mix 不编译 sass

【英文标题】：Laravel mix doesn't compile sass

【发布时间】：2020-08-04 04:12:15

【问题描述】：

我认为我的 laravel mix 配置有问题。当我编译时，它没有发出 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。我试图找到一个解决方案，但我无法弄清楚我做错了什么......

【参考方案1】：

我最近在使用动态导入的时候遇到了这个问题，发现是“extract”引起的

Mix 不支持动态导入。我们一直在等待 webpack 5 出来了。

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

正如您所说，如果没有选项提取，它将成功编译。 但是如果我想要那里的提取物怎么办？

所以这里有一个解决方法。

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

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

【讨论】：

如果我的答案很好，你能把我的答案标记为正确答案吗？