Next.js中能否实现独立浏览器CSS？style jsx是否自动补全浏览器前缀？

直接说结论：默认情况下不会自动补全浏览器兼容前缀，你要么自己手写，要么配置工具让构建阶段自动生成。比如你举的例子里，只写transform: translate(50%,50%)，默认构建过程不会帮你补上-webkit-transform: translate(50%,50%)这行代码。

怎么配置自动补全前缀？ #

• 先安装必要依赖：

  npm install autoprefixer postcss postcss-loader --save-dev
  

• 在项目根目录创建postcss.config.js文件，配置autoprefixer规则：

  module.exports = {
    plugins: [
      require('autoprefixer')({
        overrideBrowserslist: [
          'last 2 versions',
          '> 1%',
          'IE 11' // 需兼容IE11的话就保留这行
        ]
      })
    ]
  }
  

• 补充：Next.js 10及以上版本默认支持PostCSS，低版本可能需要额外修改next.config.js的webpack配置，不过目前主流版本都无需额外操作。

为啥默认不自动加？ #

style-jsx的核心作用是实现CSS的组件级作用域隔离，而浏览器前缀补全属于PostCSS这类工具的职责范畴，所以需要手动搭配合并使用。如果不想折腾配置，手动编写前缀也可行，只是后续维护成本会高一些。

内容的提问来源于stack exchange，提问作者sam