laravel - Laravel mix css因为第二个js而被清空
问题描述
我有以下配置：
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| 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.
|
*/
if (mix.inProduction()) {
mix.version();
} else {
mix.sourceMaps();
}
// webpack.mix.js
const path = require('path'),
WebpackShellPlugin = require('webpack-shell-plugin'),
BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin,
{CleanWebpackPlugin} = require('clean-webpack-plugin');
mix.webpackConfig({
plugins: [
new WebpackShellPlugin({
onBuildStart: [
'php artisan js-localization:export --quiet',
'php artisan ziggy:generate resources/js/ziggy-routes.js --quiet'
]
}),
new BundleAnalyzerPlugin({
analyzerMode: mix.inProduction() ? 'disabled' : 'server',
openAnalyzer: false
}),
new CleanWebpackPlugin({
dry: false,
cleanStaleWebpackAssets: true,
cleanOnceBeforeBuildPatterns: [],
cleanAfterEveryBuildPatterns: [
'js/chunk/*'
],
dangerouslyAllowCleanPatternsOutsideProject: false,
}),
],
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/dist/js/route.js'),
},
},
output: {
publicPath: '/',
chunkFilename: mix.inProduction() ? 'js/chunk/[name].[chunkhash].js': 'js/chunk/[name].js',
}
});
mix
.js('resources/js/project.js', 'public/js')
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
当我删除.js('resources/js/app.js', 'public/js')或者.js('resources/js/project.js', 'public/js')我的 app.css 具有有效的 css 代码时。当我使用它们时，我的 app.css 完全是空的并且是 0kb。
我也删除了BundleAnalyzerPlugin和CleanWebpackPlugin插件，但结果还是一样。我不知道为什么会这样。
当我运行npm run watch这是日志：
/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run watch --scripts-prepend-node-path=auto
> @ watch /Users/username/Sites/smaragt-cms
> npm run development -- --watch
> @ development /Users/username/Sites/smaragt-cms
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"
Executing pre-build scripts
10% building 2/2 modules 0 active
webpack is watching the files…
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 15922ms 10:10:55 AM
Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it
Asset Size Chunks Chunk Names
/css/app.css 0 bytes /js/app, /js/manifest, /js/project [emitted] /js/app, /js/manifest, /js/project
/js/manifest.js 8.95 KiB /js/manifest [emitted] /js/manifest
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot?5063b105c7646c8043d58c5289f02cca 128 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.svg?a9c4bb7348f42626454c988dbde1d0a0 684 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf?06147b6cd88c7346cecd1edd060cd5de 128 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?cccc9d29470e879e40eb70249d9a2705 73.6 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff?c5e0f14f88a828261ba01558ce2bf26f 86.4 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?c1a866ec0e04a5e1915b41fcf261457c 33.6 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.svg?7b9568e6389b1f8ae0902cd39665fc1e 141 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf?65b286af947c0d982ca01b40e1fcab38 33.3 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?f5f2566b93e89391da4db79462b8078b 13.3 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff?c4f508e7c4f01a9eeba7f08155cde04e 16.4 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?8e4a6dcc692b3887f9f542cd6894d6d4 188 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?c2801fb415f03c7b170934769d7b5397 823 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?0bff33a5fd7ec390235476b4859747a0 188 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?44d537ab79f921fde5a28b2c1636f397 74 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?333bae208dc363746961b234ff6c2500 96.1 KiB [emitted]
js/chunk//js/app.js 131 KiB /js/app [emitted] /js/app
js/chunk//js/project.js 36.5 KiB /js/project [emitted] /js/project
js/chunk//js/vendor.js 12 MiB /js/vendor [emitted] /js/vendor
js/chunk/0.js 312 KiB 0 [emitted]
js/chunk/1.js 306 KiB 1 [emitted]
js/chunk/10.js 310 KiB 10 [emitted]
js/chunk/11.js 42.8 KiB 11 [emitted]
js/chunk/12.js 46.5 KiB 12 [emitted]
js/chunk/13.js 380 KiB 13 [emitted]
js/chunk/14.js 35.1 KiB 14 [emitted]
js/chunk/15.js 49.7 KiB 15 [emitted]
js/chunk/16.js 27.5 KiB 16 [emitted]
js/chunk/17.js 24.1 KiB 17 [emitted]
js/chunk/18.js 21.3 KiB 18 [emitted]
js/chunk/19.js 14.7 KiB 19 [emitted]
js/chunk/2.js 74.1 KiB 2 [emitted]
js/chunk/20.js 14 KiB 20 [emitted]
js/chunk/21.js 16.9 KiB 21 [emitted]
js/chunk/22.js 20.4 KiB 22 [emitted]
js/chunk/23.js 17.9 KiB 23 [emitted]
js/chunk/24.js 17.5 KiB 24 [emitted]
js/chunk/25.js 18.3 KiB 25 [emitted]
js/chunk/26.js 30.3 KiB 26 [emitted]
js/chunk/27.js 54.4 KiB 27 [emitted]
js/chunk/28.js 47.3 KiB 28 [emitted]
js/chunk/29.js 54.3 KiB 29 [emitted]
js/chunk/3.js 35.3 KiB 3 [emitted]
js/chunk/30.js 33.5 KiB 30 [emitted]
js/chunk/4.js 33.5 KiB 4 [emitted]
js/chunk/5.js 36.3 KiB 5 [emitted]
js/chunk/6.js 354 KiB 6 [emitted]
js/chunk/7.js 67.8 KiB 7 [emitted]
js/chunk/8.js 378 KiB 8 [emitted]
js/chunk/9.js 306 KiB 9 [emitted]
WAIT Compiling... 10:11:00 AM
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 371ms 10:11:00 AM
Asset Size Chunks Chunk Names
/css/app.css 0 bytes /js/app, /js/manifest, /js/project [emitted] /js/app, /js/manifest, /js/project
js/chunk//js/app.js 131 KiB /js/app [emitted] /js/app
js/chunk//js/project.js 36.6 KiB /js/project [emitted] /js/project
js/chunk//js/vendor.js 12 MiB /js/vendor [emitted] /js/vendor
js/chunk/31.js 40.5 KiB 31 [emitted]
+ 32 hidden assets
解决方案
我刚刚遇到了一个可能对您有所帮助的相关问题：我.extract()创建了一个 app.css 来替换我由该.sass()方法生成的 app.css
这是我的旧 webpack.mix.js
const mix = require('laravel-mix')
mix.options({
extractVueStyles: true
}).setPublicPath('public')
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version()
.extract()
我发现的解决方案：
我在 vendor.js 中指定了要提取的模块数组，如果它们都没有生成 css 代码，则该错误不再发生。我想您必须打开您的 package.json 文件并尝试将它们一一添加以查看错误发生在哪个包中。
这是我的新 webpack.mix.js
const mix = require('laravel-mix')
mix.options({
extractVueStyles: true
}).setPublicPath('public')
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version()
// dont specify any module that generates css
.extract(['vue', 'jquery', 'hammerjs', 'photo-sphere-viewer', 'masonry-layout'])
现在 myapp.scss不会被另一个模块覆盖。
我希望它会帮助你。
推荐阅读
- visual-studio-2019 - Visual Studio 过滤调试控制台以仅显示应用程序的输出
- react-native - 如何像 Docusaurus 的 Remark SnackPlayer 插件一样渲染 UI
- reactjs - 为什么云端服务的 React 应用程序不渲染组件
- algorithm - 寻找可分配区域的高效算法
- node.js - 为什么Mongo分片只写单个分片
- java - 如何使用 Servlet 从 Post HTTP on Java 获取表单数据的键和值？
- php - Mac PHP 无法写入 .log 文件
- google-cloud-build - 如何在 CLI 执行命令错误时使云构建失败
- postman - 邮递员 403 代币发行
- c++ - 可以将客户端连接到服务器套接字linux