Separate CSS calls in Web Pack Mix config

[digisavvy]

I want to add another CSS file to be compiled by webpack.mix.js that doesn’t get compiled with all the rest of the CSS. There’s a few stylesheets I want to load only on specific page templates. I’m using Sage 10 btw.

Here’s what I have:

mix.postCss('resources/assets/styles/app.css', 'styles', [
  require('postcss-import')(),
  require('tailwindcss')('./tailwind.config.js'),
  require('precss')(),
])

`
And then for the additional file

mix.postCss('resources/assets/styles/landing-page.css', 'styles', [
  require('postcss-import')(),
  require('postcss-custom-media'),
  require('tailwindcss')('./tailwind.config.js'),
  require('precss')(),
])

Is it necessary to run the same for each file I want to have compiled?

[alwaysblank]

AFAIK, yes, you do. Although I if you don’t want to keep typing all those plugins out, you could probably do something like this:

const postCSSPlugins = [
  require('postcss-import')(),
  require('postcss-custom-media'),
  require('tailwindcss')('./tailwind.config.js'),
  require('precss')(),
];

mix.postCss('resources/assets/styles/app.css', 'styles', postCSSPlugins);
mix.postCss('resources/assets/styles/landing-page.css', 'styles', postCSSPlugins);

[digisavvy]

Ooooh, @alwaysblank, that looks so much purdier. =)

I’ll give that a whirl.