我目前正在重寫組件庫的構(gòu)建步驟以使用 Vite。我遇到了有關(guān)樣式的問題,它們沒有被拆分,而是捆綁到一個大的 style.css 文件中。這給我?guī)砹藘蓚€問題:
style.css
不會神奇地導(dǎo)入。在我之前的設(shè)置中,我進(jìn)行了樣式注入,這意味著 CSS 被注入到組件中,因此被拆分。我可以用 Vite 實(shí)現(xiàn)類似的功能嗎?
我當(dāng)前的構(gòu)建設(shè)置是這樣的:
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>
有辦法解決這個問題嗎?
如果您還沒有解決問題,我能找到的最簡單的方法是將插件 vite-plugin-css-injected-by-js
添加到 Vite,以內(nèi)部化生成的 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 });
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號