搜尋

首頁  >  問答  >  主體

在使用 Vite 建置的 React 元件庫中拆分或註入樣式

我目前正在重寫元件庫的建置步驟以使用 Vite。我遇到了有關樣式的問題,它們沒有被拆分,而是捆綁到一個大的 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粉464113078P粉464113078320 天前487

全部回覆(1)我來回復

  • P粉007288593

    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
    });

    回覆
    0
  • 取消回覆