Nuxt 3中的PostCSS插件“postcss-nested”

Question

我正在将我的应用程序从Nuxt 2升级到Nuxt 3。

到目前为止，我已经使用了SCSS，但是Nuxt 3附带了PostCSS支持。由于相同的语法是可能的，所以它与我无关，因此我想使用它。所以我在资产/颜色/ have中重命名了我的资产/颜色/ So。里面只有变量。

我已经安装了插件postcss嵌套和postcss嵌套-vars。前者工作良好，但变量似乎只有局部范围。来自colors.pcss的变量在组件中不可用。

我得到了错误消息：

css插件:vite:css后css-嵌套-vars: /mnt/project/frontend/app/app.vue?vue&type=style&index=0&lang.css:13:3:未定义变量：

在日志中是一个提示，但降级到6.0.23会产生相同的消息。

错误来自PostCSS插件的未知错误。您当前的PostCSS版本是8.4.14，但是使用6.0.23。也许这就是下面错误的根源。

扩展配置：

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

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

有什么办法解决这个问题吗？

Answer 1

正如brc的注释中提到的那样，我通过安装sass来解决这个问题，并且使用preprocessorOptions而不是css属性。

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