如何在Nuxt项目中使用.vue文件做自动前缀处理？

Posted 2021-05-05

我正在构建nuxt应用程序，并使用scss进行样式设计。

我已经安装了node-sass和sass-loader，现在可以加载外部scss文件。此全局文件正在由自动前缀处理（例如：如果我执行display: flex，它将自动添加display: -webkit-box; display: -ms-flexbox;），

我已将这些行从doc添加到我的nuxt.config.js文件中，并安装了如下所述的4个包（postcss-url，postcss-nested等。）

postcss: {
            plugins: {
                'postcss-url': false,
                'postcss-nested': {},
                'postcss-responsive-type': {},
                'postcss-hexrgba': {}
            },
            preset: {
                autoprefixer: {
                    grid: true,
                    flexbox: true
                }
            }
        },

[我希望带有lang="scss"的嵌入式样式也应该以与全局scss文件相同的方式工作（例如：如果执行display: flex，它将自动添加display: -webkit-box; display: -ms-flexbox;。]

答案

Autoprefixer应该默认在Nuxt中启用。如果需要，可以调整设置。此处更多信息：https://nuxtjs.org/api/configuration-build/#postcss