NuxtN
Nuxt•13mo ago
Nossie

Nuxt & PostCss

So my main issue is that i thougt postcss is a nice way to go with nuxt3 (because out of the box support) ( after using scss for a while now ), so everything is working fine

only thing is why mixins ( postcss ) does not work if you put it on a element that is not nested

so for example

<style lang="postcss">
.section {
  display: flex;

  .size {
    @mixin size 100px;
  }
}
</style>
This works perfect as long as it is nested

when i want to do it like
<style lang="postcss">
.section {
  display: flex;
}
.size {
    @mixin size 100px;
  }
</style>


it will give me an error of undefined mixin 🤷🏻‍♂️ im kinda mind blown that it works when nested but not when it is on its own


nuxt config is like this :
 css: ['./assets/style/main.pcss'],
  postcss: {
    plugins: {
      'postcss-nested': {},
      'postcss-mixins':{},
      '@csstools/postcss-global-data': {
        files: [
          './app/assets/style/global/media-queries.pcss',
          './app/assets/style/global/mixins.pcss'
        ],
      },

      'postcss-custom-media': {},
    }
  }
Was this page helpful?