如何让autoprefixer在Nuxt项目中处理.vue文件？

Question

我正在构建一个nuxt应用程序，并使用scss设置样式。

我已经安装了node-sass和sass-loader &现在可以加载外部scss文件了。这个全局文件正在由自动修复程序处理(例如:如果我执行display: flex，它会自动添加display: -webkit-box; display: -ms-flexbox;)，

我已经将文档中的这些行添加到我的nuxt.config.js文件中，并安装了下面提到的4个pakcage (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;)。

Answer 1

可以在devDependencies后面加上package.json - "browserslist"：“覆盖99.5%”

Answer 2

默认情况下，Nuxt中应该启用自动修复程序。如果需要，可以调整设置。更多信息请点击此处：https://nuxtjs.org/api/configuration-build/#postcss

Answer 3

也许这会对你有帮助

preset: {
    autoprefixer: {
      flexbox: true,
      grid: true,
      overrideBrowserslist: ['last 3 versions', '> 1%', 'ie 8', 'ie 7'],
    },
  },