使用 Laravel MIX 将多个 CSS 编译为一个 CSS答案

【问题标题】：Compiling multiple CSS into ONE CSS with Laravel MIX使用 Laravel MIX 将多个 CSS 编译为一个 CSS
【发布时间】：2020-09-23 13:42:00
【问题描述】：

我当前的 webpack.mix.js 配置是：

mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
]).extract();

如果我有另一个 CSS，比方说“plugin-1.css”，我如何合并两者以便得到一个 app.css 的输出？

我尝试了 ['resources/css/app.css', 'plugin-1.css'] 但这不是一个选项。

【问题讨论】：

标签： laravel laravel-mix

【解决方案1】：

解决方案是将所有需要的 css 导入到一个主 css 文件中，然后在混合链中使用它：

app.css：

@import 'resources/css/plugin-1.css';
@import 'resources/css/plugin-2.css';

[the content...]

【讨论】：

【解决方案2】：

我一般是这样用的

mix.styles([
'resources/css/plugin-1.css',
'resources/css/plugin-2.css'
], 'public/assets/css/app.css');

【讨论】：

【解决方案3】：

你把它们锁起来

mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
]).postCss('resources/css/plugin-1.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
]).extract();

【讨论】：

这将得到 2 个输出文件：app.css 和 plugin-1.css 我需要将它们合并到一个文件中。我试图将两者的输出文件名强制为“public/css/app.css”，但如果我这样做，我最终会得到一个文件，但只能来自 plugin-1.css（会发生覆盖，而不是追加)