PostCSS Plugin "postcss-nested-vars" in Nuxt 3

Question

I'm in the process of upgrading my app from Nuxt 2 to Nuxt 3.

So far I've used SCSS, but Nuxt 3 comes with PostCSS support. Since the same syntax is possible, it's not relevant to me and hence I want to use it. So I have renamed my assets/colors.scss in assets/colors.pcss. There are only variables in it.

I have installed the plugins postcss-nested and postcss-nested-vars. The former works well, but variables seems only to have local scope. Variables from colors.pcss are not available in the components.

I get the error message:

[plugin:vite:css] postcss-nested-vars: /mnt/project/frontend/app/app.vue?vue&type=style&index=0&lang.css:13:3: Undefined variable: test

In the logs is a hint, but downgrading to 6.0.23 produces the same message.

ERROR Unknown error from PostCSS plugin. Your current PostCSS version is 8.4.14, but postcss-nested-vars uses 6.0.23. Perhaps this is the source of the error below.

Extended config:

export default defineNuxtConfig({
    postcss: {
        plugins: {
            'postcss-nested': {},
            'postcss-nested-vars': {}
        }
    },

    css: [
        '@/assets/styles/colors.pcss',
    ]
})

Any ideas to solve the issue?

Answer 1

I solved it by install sass as mentioned in brc-dd's comment and use preprocessorOptions instead of the css property.

export default defineNuxtConfig({
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@import "@/assets/styles/colors.scss";',
                },
            },
        },
    },
})