Laravel Mix & Vue：如何获得多个 CSS 输出？答案

【问题标题】：Laravel Mix & Vue: How do you get multiple CSS outputs?Laravel Mix & Vue：如何获得多个 CSS 输出？
【发布时间】：2019-12-13 05:38:55
【问题描述】：

我正在构建 2 个捆绑包，因为它们是网站不同部分的独立 Vue 应用程序。我在混合选项中选择将样式从 VUE 文件中提取到 CSS 文件中，但它只输出 1 个 css 文件 vue-styles.css，而且它似乎只有我的 app-admin-support.js 应用程序中的样式，因为它在下面列出另一个。是否可以创建多个 CSS 文件？这是我的混合文件的样子：

mix .js('resources/assets/js/app.js', 'dist/js')
    .js('resources/assets/js/app-admin-support.js', 'dist/js')
    .extract(['vue', 'vuetify'])

mix.options({
  extractVueStyles: true, // Extract .vue component styling to file, rather than inline.
  purifyCss: true // Remove unused CSS selectors.
});

【问题讨论】：

There are no plans to support this at the moment。但是，这并不意味着您无法通过使用MiniCssExtractPlugin 并更改规则来实现您想要的。
感谢@Ohgodwhy。昨晚我实际上遇到了一篇关于创建多个混合文件的文章，这似乎满足了我的需求。谢谢！！
@burtonLowel 请分享那篇文章。或发布解决方案。

标签： laravel vue.js vuetify.js laravel-mix

【解决方案1】：

几天前我遇到了同样的问题，这可能会有所帮助

只需将您的 webpack.mix.js 更改为：

mix .js('resources/assets/js/app.js', 'dist/js')
    .js('resources/assets/js/app-admin-support.js', 'dist/js')
    .extract(['vue', 'vuetify'])
    // If you are using vuetifyjs-mix-extension you can do this:
    .vuetify("", { extract: "[name].css" })

mix.options({
  extractVueStyles: true,
  purifyCss: true,
});

这是我的，它可以帮助：

【讨论】：