如何通过Vite实现SCSS Modules样式内联，使React组件携样式复用？

核心问题分析 #

你当前的Vite配置中，cssCodeSplit: false会强制将所有CSS合并为单个文件，加上Lib模式默认的CSS提取逻辑，导致样式无法随组件内联复用。同时组件代码存在几处拼写错误，会导致样式绑定失效。

步骤1：修复组件代码错误 #

首先修正组件中的拼写和属性问题：

import styles from './styles.module.scss';

const MyComponent = () => (
  // 修正：classNames → className；style → styles；myCompnent → myComponent
  <section className={styles.myComponent}>
    ....
  </section>
)

步骤2：使用插件实现样式内联（推荐方案） #

使用vite-plugin-css-injected-by-js插件，可自动将CSS注入到对应的JS模块中，组件导入时样式会自动挂载到页面。

1. 安装插件

npm install vite-plugin-css-injected-by-js --save-dev

2. 修改Vite配置

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';

export default defineConfig({
  plugins: [
    react(),
    cssInjectedByJsPlugin() // 添加样式内联插件
  ],
  css: {
    modules: {
      scopeBehaviour: 'local',
      localsConvention: 'camelCaseOnly',
      generateScopedName: `v3-[name]__[local]___[hash:base64:5]`,
    },
  },
  build: {
    cssCodeSplit: true, // 允许CSS按组件拆分，插件会自动内联
    lib: {
      entry: 'src/index.ts',
      name: '@stadionh1-v3/base-ui',
    },
    ssr: false, // 关闭SSR模式，避免CSS提取逻辑冲突
    rollupOptions: {
      input: './libs/base-ui/src/index.ts',
      external: ['react', 'react-dom', 'react/jsx-runtime'],
    },
  },
  esbuild: {
    jsxFactory: 'React.createElement',
    jsxFragment: 'React.Fragment',
  },
});

配置调整说明 #

• cssInjectedByJsPlugin：打包时将每个组件的CSS转换为JS代码，组件加载时自动将样式注入到页面<style>标签
• cssCodeSplit: true：让Vite按组件拆分CSS，插件再将拆分后的CSS内联到对应JS模块
• ssr: false：SSR模式下Vite默认优先提取CSS为单独文件，关闭后适配内联逻辑

替代方案：手动配置PostCSS内联 #

如果不想额外安装插件，可通过rollup-plugin-postcss实现：

1. 安装插件：npm install rollup-plugin-postcss --save-dev
2. 修改Vite配置：

import postcss from 'rollup-plugin-postcss';

export default defineConfig({
  plugins: [
    react(),
    postcss({
      modules: {
        scopeBehaviour: 'local',
        localsConvention: 'camelCaseOnly',
        generateScopedName: `v3-[name]__[local]___[hash:base64:5]`,
      },
      extract: false, // 禁止提取为单独CSS文件
      inject: true, // 将CSS注入到DOM
    }),
  ],
  // 其余配置同推荐方案，关闭SSR、开启cssCodeSplit
});

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