如何在Svelte + Vite应用中正确添加并配置Autoprefixer

问题说明 #

开发Svelte + Vite应用时，触发VSCode内Autoprefixer扩展处理Svelte组件样式会抛出如下错误：

[Autoprefixer] Autoprefixer Cannot execute Autoprefixer because there is not supported languages. Supported: LESS, SCSS, PostCSS and CSS.

报错原因 #

VSCode 中的 Autoprefixer 扩展仅支持识别独立的 LESS、SCSS、PostCSS、CSS 文件，无法解析 .svelte 单文件组件内嵌入的 <style> 代码块，因此手动触发扩展的加前缀操作时会抛出上述错误。
不需要依赖编辑器扩展实现前缀补全，将 Autoprefixer 集成到 Vite 构建流程中即可自动覆盖所有样式（包括Svelte组件内样式）的前缀处理，稳定性更高。

配置步骤 #

• 安装依赖
  在项目根目录执行命令，安装所需开发依赖：
  npm install -D autoprefixer postcss
  其他包管理器对应命令：

  • pnpm: pnpm add -D autoprefixer postcss
  • yarn: yarn add -D autoprefixer postcss

• 添加PostCSS配置
  在项目根目录（与package.json、vite.config.js/ts同级）新建postcss.config.js文件，写入如下配置：

export default {
  plugins: {
    autoprefixer: {}
  }
}

Vite 内置了PostCSS处理能力，会自动读取该配置，对所有经过编译的样式文件（包括Svelte组件内提取的样式）自动应用Autoprefixer，不需要额外修改Vite配置文件。

• （可选）配置兼容浏览器范围
  在package.json中新增browserslist字段，自定义需要兼容的浏览器版本范围，示例配置：

{
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "not dead"
  ]
}

• 验证效果
  正常启动开发服务npm run dev或者执行构建npm run build即可，所有需要兼容的CSS属性都会被自动补上对应浏览器前缀，不需要手动触发VSCode的Autoprefixer命令。

额外说明 #

如果不需要对独立CSS文件手动触发前缀补全，可以直接禁用VSCode中的Autoprefixer扩展，避免误触弹出报错。构建流程的自动处理会统一管控所有样式的兼容规则，不会出现组件内样式漏加前缀的问题。

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