无法解析样式化组件的流依赖项

import styles from './Component.module.css';

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

<template>
  <div class="example">Hello World</div>
</template>

<script>
export default {
  name: 'ExampleComponent',
};
</script>

<style scoped>
@import './Component.css';
</style>

// src/Component.js
import React from 'react';
import styles from './Component.module.css';

const Component = () => {
  return <div className={styles.example}>Hello World</div>;
};

export default Component;

/* src/Component.module.css */
.example {
  color: red;
}

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};