CODEWITHSUNDEEP
laravellaravel-mix
usernotnull
usernotnull

Reputation: 3628

Compiling multiple CSS into ONE CSS with Laravel MIX

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.

Upvotes: 3

Views: 9302

Answers (3)

Rtaners
Rtaners

Reputation: 21

I usually use like this

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

Upvotes: 2

usernotnull
usernotnull

Reputation: 3628

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...]

Upvotes: 6

N69S
N69S

Reputation: 17206

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

Upvotes: 1

Related Questions