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>

<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>

<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': {},
    }
  }

 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': {},
    }
  }

Nuxt•15mo ago•

5 replies

Nossie

Nuxt & PostCss

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

  .size {
    @mixin size 100px;
  }
}
</style>

<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>

<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': {},
    }
  }

 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': {},
    }
  }

Nuxt & PostCss

Similar Threads

Nuxt & PostCss

Similar Threads

Similar Threads

Similar Threads