Nx+Vite+React组件库外部使用时SCSS样式不生效求助

方案一：将样式内联注入到JS输出文件 #

通过rollup-plugin-postcss插件实现样式与JS打包在一起，外部引用时无需额外引入CSS。

1. 安装依赖

npm install rollup-plugin-postcss --save-dev

2. 修改vite.config.ts配置

import { defineConfig } from 'vite';
import postcss from 'rollup-plugin-postcss';
// 保留原有导入的dts、react、viteTsConfigPaths等插件

export default defineConfig({
  cacheDir: '../../node_modules/.vite/web',
  plugins: [
    dts({
      entryRoot: 'src',
      tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'),
      skipDiagnostics: true,
    }),
    react(),
    viteTsConfigPaths({
      root: '../../',
    }),
    // 添加postcss插件配置
    postcss({
      inject: true, // 将样式动态注入到JS中
      extract: false, // 禁止生成单独的style.css文件
      use: ['sass'], // 处理SCSS语法
      modules: false, // 若使用CSS Modules则设为true，根据项目实际情况调整
    }),
  ],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'web',
      fileName: 'index',
      formats: ['es', 'cjs'],
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'react/jsx-runtime']
    },
  },
});

方案二：让外部项目自动识别并引入样式 #

如果不想内联样式，可通过配置package.json让构建工具自动引入独立的CSS文件：

修改package.json，添加style字段指向生成的CSS文件：

{
  "name": "@example/web",
  "version": "1.1.3",
  // 保留原有配置
  "style": "./style.css"
}

主流构建工具（如Vite、Webpack）会识别该字段，自动引入组件库的样式文件。

排查手动引入样式失效的原因 #

如果尝试手动引入style.css仍无效，可检查以下两点：

• 路径问题：外部项目需通过包名引入，如import '@example/web/style.css'，而非本地相对路径
• CSS Modules冲突：若组件库使用了CSS Modules，类名会被哈希处理，需确保组件使用哈希后的类名，或关闭模块化配置

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