我目前正在重寫元件庫的建置步驟以使用 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
,這不是我要找的。 p>
有辦法解決這個問題嗎?
P粉0072885932024-01-11 15:47:29
如果您還沒有解決問題,我能找到的最簡單的方法是將插件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 });