uniapp 配置 postcss 的详细方法

在uniapp项目中如何正确配置postcss？我在vue.config.js里添加了postcss配置但好像没有生效，具体需要修改哪些文件？是否有针对uniapp的特殊配置要求？求详细操作步骤和注意事项。

在项目根目录创建 postcss.config.js 文件，内容如下：

module.exports = {
  plugins: {
    'autoprefixer': {}
  }
}

如需更多插件，可安装后在此配置。

yibo5220 2楼

在 UniApp 中配置 PostCSS 主要通过 vue.config.js 文件实现，用于处理 CSS 兼容性和优化。以下是详细步骤：

1. 创建/修改 `vue.config.js`

在项目根目录创建或编辑 vue.config.js 文件（如不存在则新建）。

2. 配置 PostCSS

添加以下代码到 vue.config.js：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            // 示例插件：自动添加浏览器前缀
            require('autoprefixer')({
              overrideBrowserslist: ['> 1%', 'last 2 versions'] // 兼容主流浏览器最近两个版本
            })
            // 可继续添加其他 PostCSS 插件，例如：
            // require('postcss-pxtorem')({ rootValue: 16, propList: ['*'] }) // 将 px 转换为 rem
          ]
        }
      }
    }
  }
}

3. 安装所需插件

根据配置的插件，通过 npm 安装对应依赖。例如：

npm install autoprefixer --save-dev

4. 验证配置

重启开发服务器（如 npm run dev），检查 CSS 是否按预期处理（如自动添加前缀）。

注意事项：

HBuilderX 用户：部分版本可能需在项目根目录创建 postcss.config.js 文件进行配置，内容与上述 postcssOptions 一致。
插件顺序：插件执行顺序从右到左，注意依赖关系。
平台差异：UniApp 会为不同平台（如小程序、H5）自动处理部分兼容性，无需重复配置。