react项目使用vite时css顺序错误

Question

我有一个旧的react项目，我想将构建工具迁移到vite，但是当运行该项目时，我注意到CSS顺序错误：

.widget-panel-conf

是组件样式，

.ant-row

是antd默认样式，我希望组件样式在第三方包之后渲染，并且这是大多数构建工具中的正常行为。 有我的

vite.config.js

和

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,
);

这是 ./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';

我想知道为什么会出现这种异常情况？是不是需要写一些特殊的配置，或者我的配置有什么问题？

Answer 1

问题解决了。原因是antd CSS插入在router之后。即

@import '~antd/dist/antd.less';

之后的

import RouterList from './router';

。它导致组件 CSS 覆盖默认的 antd CSS。只要让router在antd CSS之后导入就可以解决了。