Compiling multiple CSS into ONE CSS with Laravel MIX

Question

My current webpack.mix.js configuration is:

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

If I have another CSS, let's say 'plugin-1.css', how can I merge both so that I get an output of one app.css?

I tried ['resources/css/app.css', 'plugin-1.css'] but that's not an option.

usernotnull · Accepted Answer · 2020-10-10 05:34:20Z

6

The solution was to import all the required css into one main css file, then use that inside the mix chain:

app.css:

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

[the content...]

answered Oct 10, 2020 at 5:34

usernotnull

3,6184 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rtaners · Accepted Answer · 2021-10-20 12:07:30Z

2

I usually use like this

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

answered Oct 20, 2021 at 12:07

Rtaners

211 bronze badge

Comments

N69S · Accepted Answer · 2020-09-23 14:34:39Z

1

You chain them

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

answered Sep 23, 2020 at 14:34

N69S

17.3k4 gold badges25 silver badges41 bronze badges

1 Comment

usernotnull Over a year ago

this will end up with 2 output files: app.css AND plugin-1.css I need them to be merged into one file. I tried to force the output file name to 'public/css/app.css' for both but if I do that, I'll end up with one file BUT only from the plugin-1.css (overwriting will happen, not append)

Collectives™ on Stack Overflow

Compiling multiple CSS into ONE CSS with Laravel MIX

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related