【Nuxt.js】postcss-custom-properties のフォールバックが出力されない

Question

*.vue ファイルの中でCSSカスタムプロパティを使用しています。

それぞれのファイルの中で定義した変数は下記のように変換されます。

<style lang="postcss">
:root {
  --main-color: red;
}
h1 {
  color: var(--main-color);
}
</style>

/* ↓ ブラウザ上で確認すると以下のようになっている */ 

h1 {
  color: red;
  color: var(--main-color);
}

ただし、ファイルをまたいだとき（default.vue で定義した変数を index.vue で使う）や変数定義用の CSS ファイルに別途記載した場合、上記の例でいうところの color: red; のフォールバックが出力されません。

IE11の対応もあるためフォールバックを出力されるようにしたいのですが方法はありますでしょうか。