Порядок CSS неверен в проекте реагирования на использование vite ⇐ CSS

[Anonymous]

У меня есть старый проект React, и я хочу перенести инструмент сборки на Vite, но при запуске проекта я замечаю, что порядок CSS неправильный: Неправильный стиль порядка в DevTools .widget-panel-conf — это стиль компонента, .ant-row — это стиль по умолчанию antd. Я ожидаю, что стиль компонента будет отображаться после стороннего пакета, и это нормальное поведение большинства инструментов сборки. Есть мои vite.config.js и main.jsx

import { fileURLToPath, URL } из 'node:url'; импорт {defineConfig, loadEnv} из 'vite'; импортировать {viteCommonjs} из '@originjs/vite-plugin-commonjs'; импортировать zipPack из «vite-plugin-zip-pack»; реакция на импорт из @vitejs/plugin-react импортировать путь из «пути»; // https://vitejs.dev/config/ экспортировать default defineConfig(({ mode }) => { const env = loadEnv(mode, 'config', ''); возвращаться { база: '/', сервер: { порт: 3001, прокси: {} }, envDir: 'конфигурация', определять: { 'process.env': окр. }, эсбилд: { падение: ['отладчик'], чистый: ['console.log'], }, строить: { активыInlineLimit: 8192, исходная карта: ['test', 'pre'].includes(mode), }, CSS: { параметры препроцессора: { меньше: { javascriptEnabled: правда, дополнительныеДанные: '@root-entry-name: default;', }, }, }, плагины: [ реагировать({ Вавилон: { плагины: [ ["@babel/plugin-proposal-decorators", { "version": "legacy" }] ] } }), viteCommonjs(), ], решать: { расширения: ['.js', '.jsx', '.json'], псевдоним: [ { find: '@', замена: fileURLToPath(new URL('./src', import.meta.url)) }, { find: /^~/, замена: '' }, ] }, }; }); импортировать React из 'реагировать'; импортировать ReactDOM из «реагировать-дом»; импортировать {Поставщик} из 'реагировать-редукс'; импортировать { AliveScope } из «реагировать-активации»; импортировать { createStore, applyMiddleware } из «redux»; импортируйте createSagaMiddleware из «redux-saga»; импортировать { ConfigProvider, сообщение, Spin} из 'antd'; импортируйте CustomEmpty из «@/comComponents/CustomEmpty»; импортируйте CustomSpin из @/comComponents/CustomSpin; Редуктор импорта из './store'; импортировать rootSaga из «./sagas»; импортировать RouterList из './router'; импортировать './utils/global-error'; импорт './utils/polyfill'; импортировать './utils/baiduHM'; импортировать './utils/xhr.config'; импортировать './style/index.less'; // это сторонний стиль const sagaMiddleware = createSagaMiddleware(); const промежуточное программное обеспечение = [sagaMiddleware]; const store = createStore(reducer, applyMiddleware(...middleware)); sagaMiddleware.run(rootSaga); сообщение.конфигурация({ верх: 100, продолжительность: 2, МаксКаунт: 3, }); Spin.setDefaultIndicator(); const mountNode = document.getElementById('app'); ReactDOM.render( , монтироватьноде, ); Это файл ./style/index.less

@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'; Я хочу знать, почему возникла необычная ситуация? Нужно ли писать какой-то специальный конфиг или что не так с моим конфигом?