如何确保Vite构建后主CSS始终位于第三方CSS之后加载

方法1：调整入口文件的CSS导入顺序 #

在项目入口文件（比如main.tsx）里，把你的主CSS文件放在所有第三方库及其样式的后面导入：

// 先导入第三方依赖和它们的样式
import 'antd/dist/antd.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
// 最后导入自己的主CSS
import './index.css'; // 对应构建后的base-xxx.css源文件
import App from './App';

Vite会严格按照代码里的导入顺序生成构建后的资源加载顺序，后导入的CSS会在HTML里排在更后面，样式优先级自然更高。

方法2：用PostCSS插件强制调整样式顺序 #

如果第三方库的CSS是按需加载自动注入的，试试用PostCSS插件来干预：

1. 先装依赖：

npm install postcss-sorting --save-dev

2. 项目根目录新建postcss.config.js：

module.exports = {
  plugins: [
    require('postcss-sorting')({
      order: [
        "custom-properties",
        "dollar-variables",
        "declarations",
        "rules",
        "at-rules"
      ],
      "properties-order": "alphabetical"
    })
  ]
}

3. 在vite.config.ts里配置启用PostCSS：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  css: {
    postcss: './postcss.config.js'
  }
});

方法3：通过HTML模板手动控制加载顺序 #

如果项目用自定义HTML模板，手动把主CSS放在第三方CSS后面引入：

注意：如果第三方CSS是Vite自动注入的，得先禁用自动注入，再手动引入

1. 修改vite.config.ts拆分第三方chunk：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom', 'antd'] // 把第三方库打包成单独chunk
        }
      }
    }
  }
});

2. 在HTML模板里手动引入：

<!-- 先引第三方CSS -->
<link rel="stylesheet" href="/vendor.css">
<!-- 最后引自己的主CSS -->
<link rel="stylesheet" href="/base-1f0c8050.css">

注：构建后的文件名带哈希的话，开发环境可以用%ASSET_URL%占位，或者在Vite配置里固定文件名。

方法4：提升主样式选择器优先级（兜底方案） #

如果前面的方法都搞不定，直接提升自己样式的优先级：

• 给选择器加更具体的层级，比如：

/* 原来的样式 */
.btn {
  color: red;
}
/* 改后 */
body .app-container .btn {
  color: red;
}

• 实在没办法再用!important（尽量别用，会增加维护成本）：

.btn {
  color: red !important;
}

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