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

Compiling multiple CSS into ONE CSS with Laravel MIX

我当前的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'],但这不是一个选择。

你将它们链接起来

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();

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

app.css:

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

[the content...]

我一般都是这样用的

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