How to run a webpack plugin after another?

Question

I have the files:

/* variables.scss */

:root {
    --color: red;
}

/* button.scss */

.color {
    color: var(--color);
}

And I import then in JS:

/* index.js */

import "./variavles.scss";
import "./button.scss";

I'm using postcss-cssnext to replace the variables with it's values, But using it with style-loader doesn't work because there are two separate files so postcss loose the context of the variables: (https://github.com/MoOx/postcss-cssnext/issues/418#issuecomment-334056406).

So my question is: Is there a way to only call the postcss plugin after all file are concatenated into one?