Nuxt•4w ago

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

3 Replies

kapa.ai•4w ago

Hi @Nossie. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To answer your question about PostCSS and Nuxt, let's look at the relevant information from the knowledge sources provided. Nuxt does indeed come with PostCSS built-in, as mentioned in the Nuxt documentation on styling (https://nuxt.com/docs/getting-started/styling#using-postcss). However, the default configuration might not include all the plugins you're trying to use. The issue you're experiencing with mixins not working outside of nested rules could be related to the order of PostCSS plugins or how they're configured. Let's break this down: 1. PostCSS Plugin Order: The order of plugins in your PostCSS configuration matters. Make sure postcss-mixins is listed before postcss-nested in your configuration. 2. Plugin Configuration: Ensure that your postcss-mixins plugin is correctly configured to recognize your mixins file. Here's a suggested configuration based on the Nuxt PostCSS configuration documentation (https://nuxt.com/docs/api/nuxt-config#postcss-1):

export default defineNuxtConfig({
  css: ['./assets/style/main.pcss'],
  postcss: {
    plugins: {
      '@csstools/postcss-global-data': {
        files: [
          './app/assets/style/global/media-queries.pcss',
          './app/assets/style/global/mixins.pcss'
        ],
      },
      'postcss-mixins': {},
      'postcss-nested': {},
      'postcss-custom-media': {},
    }
  }
})

export default defineNuxtConfig({
  css: ['./assets/style/main.pcss'],
  postcss: {
    plugins: {
      '@csstools/postcss-global-data': {
        files: [
          './app/assets/style/global/media-queries.pcss',
          './app/assets/style/global/mixins.pcss'
        ],
      },
      'postcss-mixins': {},
      'postcss-nested': {},
      'postcss-custom-media': {},
    }
  }
})

Note that I've moved postcss-mixins before postcss-nested in the plugins order. If this doesn't resolve the issue, there might be a problem with how your mixins are defined or imported. Make sure that your mixins file is correctly loaded and that the mixins are defined properly. Also, ensure that you're using the correct syntax for PostCSS mixins. The @mixin directive is typically used to define mixins, while @mixin-content is used to include them. Your usage @mixin size 100px; looks unusual and might be causing issues. If you continue to experience problems, you might want to consider reporting a bug (https://nuxt.com/docs/community/reporting-bugs) to the Nuxt team, as this could potentially be a configuration issue or a bug in how Nuxt integrates with PostCSS. Remember, when working with PostCSS in Nuxt, you can always refer to the official Nuxt documentation on PostCSS configuration (https://nuxt.com/docs/api/nuxt-config#postcss) for the most up-to-date information on how to set up and use PostCSS plugins. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@231895670267576320> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

NossieOP•4w ago

already figured it out what was going wrong,, global-data plugin is not for using things GLOBAL , but makes data / things global at run time for other plugins to use ... so thats why the nested plugin worked because it had that data, currently fixed it with giving up the mixin dir in nuxt config, so it will autoload the mixins

Gaming

Programming

Nuxt & PostCss