Home

Hi!

Let’s say I have the following set up:

nuxt.config.js:

module.exports = {
  build: {
    postcss: [
      require('postcss-cssnext')()
    ]
  }
};

assets/settings.css:

:root {
  --color: red;
}

layouts/default.vue:

<template>
  <div class="app">
    <h1>Best app ever!</h1>
    <nuxt />
  </div>
</template>

<style lang="postcss">
  @import '~assets/settings.css';

  body {
    color: var(--color);
  }
</style>

The idea is to have a global CSS file with some variables I could reuse in my components. I want this file and all the other styles to pass through postcss-loader.

The issue I’m having is that the result of this config is the postcss variables not being processed by postcss-loader and directly copied to the output:

:root {
  --color: red;
}

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

I tried another solution by including postcss-import, but in this case, the aliases don’t work anymore.

How can I include an external/global postcss file with the aliases still working?

Thank you!