SvelteKit中AutoPrefixer失效问题：适配常规CSS与组件内CSS

1. 让 AutoPrefixer 作用于常规 CSS 文件 #

要让src/css目录下的全局 CSS 文件（如shake.css）以及src/app.css被 AutoPrefixer 处理，需确保 Vite 通过 PostCSS 解析这些文件，具体配置步骤如下：

• 确认依赖安装：确保已装全所需工具：

  npm install autoprefixer postcss postcss-load-config --save-dev
  

• 配置 PostCSS 核心规则：在项目根目录的postcss.config.cjs中，明确启用 autoprefixer 并指定目标浏览器范围：

  module.exports = {
    plugins: [
      require('autoprefixer')({
        overrideBrowserslist: [
          'last 2 versions',
          '> 1%',
          'IE 11'
        ]
      })
    ]
  }
  

• 让 SvelteKit/Vite 识别全局 CSS 处理规则：修改svelte.config.js，在 Vite 配置中开启 PostCSS 对全局 CSS 的支持：

  import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
  
  export default {
    preprocess: vitePreprocess(),
    kit: {
      vite: {
        css: {
          postcss: true // 自动读取根目录的postcss.config.cjs
        }
      }
    }
  };
  

• 正确导入全局 CSS：在根布局组件src/routes/+layout.svelte中导入全局 CSS，确保 Vite 能捕获并处理这些文件：

  <script>
    import '$src/app.css';
    import '$src/css/shake.css';
  </script>
  

重启开发服务器后，全局 CSS 中的属性会自动生成厂商前缀。

2. 适配 Svelte 组件内部 CSS #

Svelte 组件内的<style>标签可通过svelte-preprocess让 AutoPrefixer 生效，步骤如下：

• 安装 svelte-preprocess：

  npm install svelte-preprocess --save-dev
  

• 更新 Svelte 配置：修改svelte.config.js，配置svelte-preprocess并启用 PostCSS 支持：

  import preprocess from 'svelte-preprocess';
  
  export default {
    preprocess: preprocess({
      postcss: true // 复用已有的postcss.config.cjs配置
    }),
    kit: {
      vite: {
        css: {
          postcss: true
        }
      }
    }
  };
  

之后组件内部的 CSS 会自动经过 AutoPrefixer 处理，例如：

<style>
  .shake {
    animation: shake 0.5s;
  }
</style>

会被编译为包含-webkit-animation前缀的样式。

内容的提问来源于stack exchange，提问作者Eli O.