The css order is wrong in react project use vite

Question

I have an old react project, and I want to migrate the build tool to vite, but when run the project, I notice the CSS order is wrong: The wrong order style in DevTools .widget-panel-conf is the component style, .ant-row is the antd default style, I expect the component style render after the third party package, and It's the normal behavior in most build tools. There are my vite.config.js and main.jsx

import { fileURLToPath, URL } from 'node:url';
import { defineConfig, loadEnv } from 'vite';
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
import zipPack from 'vite-plugin-zip-pack';
import react from '@vitejs/plugin-react'
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, 'config', '');

  return {
    base: '/',
    server: {
      port: 3001,
      proxy: {}
    },
    envDir: 'config',
    define: {
      'process.env': env
    },
    esbuild: {
      drop: ['debugger'],
      pure: ['console.log'],
    },
    build: {
      assetsInlineLimit: 8192,
      sourcemap: ['test', 'pre'].includes(mode),
    },
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          additionalData: '@root-entry-name: default;',
        },
      },
    },
    plugins: [
      react({
        babel: {
          plugins: [
            ["@babel/plugin-proposal-decorators", { "version": "legacy" }]
          ]
        }
      }),
      viteCommonjs(),
    ],
    resolve: {
      extensions: ['.js', '.jsx', '.json'],
      alias: [
        { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
        { find: /^~/, replacement: '' },
      ]
    },
  };
});

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { AliveScope } from 'react-activation';
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';

import { ConfigProvider, message, Spin } from 'antd';
import CustomEmpty from '@/components/CustomEmpty';
import CustomSpin from '@/components/CustomSpin';
import reducer from './store';
import rootSaga from './sagas';
import RouterList from './router';

import './utils/global-error';
import './utils/polyfill';
import './utils/baiduHM';
import './utils/xhr.config';
import './style/index.less';  // this is the thirdparty style

const sagaMiddleware = createSagaMiddleware();
const middleware = [sagaMiddleware];
const store = createStore(reducer, applyMiddleware(...middleware));
sagaMiddleware.run(rootSaga);

message.config({
  top: 100,
  duration: 2,
  maxCount: 3,
});
Spin.setDefaultIndicator(<CustomSpin spin />);

const mountNode = document.getElementById('app');

ReactDOM.render(
  <Provider store={store}>
    <ConfigProvider renderEmpty={CustomEmpty}>
      <AliveScope>
        <RouterList />
      </AliveScope>
    </ConfigProvider>
  </Provider>,
  mountNode,
);

This is the ./style/index.less file

@import '~antd/dist/antd.less';
@import '~codemirror/lib/codemirror.css';
@import '~codemirror/theme/xq-dark.css';
@import '~codemirror/addon/hint/show-hint.css';
@import '~braft-editor/dist/index.css';
@import 'variables.less';
@import 'utils/common.less';
@import 'utils/antd-cover.less';
@import 'pages/index.less';

I want to know why cause the unusual situation? Is some special config need to write, or what's wrong with my config?

Answer 1

The problem is resolved. The reason is antd CSS insert after the router. That is @import '~antd/dist/antd.less'; after import RouterList from './router';. It causes the component CSS is cover the default antd CSS. Just let the router import after the antd CSS and resolved.