Using variables set in webpack config in postCSS

[tyssen]

I have a project that uses SASS with Webpack where I can pass an environment variable into the CSS like this:

mix.sass('app/styles/app.scss', `${distPath}/app.css`, {
    data: (process.env.PREVIEW) ? '$theme: theme-preview;' : '$theme: theme;'
})

and then use it like background-image: url('/themes/#{ $theme }/images/file.png').

Now I need to be able to do the same thing with a different project using PostCSS which is set up like this:

mix.postCss('app/styles/app.css', 'dist', [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-for'),
    require('postcss-nested'),
    require('postcss-extend')]
);

I've looked at a couple of different plugins like postcss-simple-vars and postcss-themed but must not be configuring them correctly because I always get $theme printed in the output.

Does anyone have any recommendations with examples of how to do this?

[tyssen]

@ai I'm sorry, I thought I'd posted in a discussions, not issue, section. I mean it says at the top under Q&A "Ask the community for help". I've had a look at some of the other posts in this category and don't really see how mine is any different from others.