我目前正在重写组件库的构建步骤以使用 Vite。我遇到了有关样式的问题，它们没有被拆分，而是捆绑到一个大的 style.css 文件中。这给我带来了两个问题：
style.css 不会神奇地导入。在我之前的设置中，我进行了样式注入，这意味着 CSS 被注入到组件中，因此被拆分。我可以用 Vite 实现类似的功能吗？
我当前的构建设置是这样的：
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dts from "vite-plugin-dts";
export default defineConfig({
plugins: [react(), dts()],
resolve: {
alias: {
"@": "/src"
}
},
build: {
outDir: "dist",
lib: {
entry: "src/index.ts",
name: "lib",
fileName: format => `lib.${format}.js`
},
rollupOptions: {
external: ["react", "react-dom"],
output: {
globals: {
react: "React",
"react-dom": "ReactDOM"
}
}
},
sourcemap: true
},
css: {
modules: {
generateScopedName: "[name]__[local]___[hash:base64:5]"
}
}
});
最终的 dist 文件夹如下所示（我排除了所有 .d.ts 文件）：
正如你所看到的，有一个很大的style.css，这不是我要找的。
有办法解决这个问题吗？
如果您还没有解决问题，我能找到的最简单的方法是将插件
vite-plugin-css-injected-by-js添加到 Vite，以内部化生成的 CSS到JS文件中。https://www.npmjs.com/package /vite-plugin-css-injected-by-js
然后您可以将您的 vite 配置文件更改为：
import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import dts from "vite-plugin-dts"; // added the import for inject css automatically... import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js' export default defineConfig({ plugins: [ react(), dts(), cssInjectedByJsPlugin(), ], // ... rest of your vite configuration });