Heim  >  Fragen und Antworten  >  Hauptteil

Teilen oder fügen Sie Stile in mit Vite erstellte React-Komponentenbibliotheken ein

Ich schreibe derzeit die Build-Schritte für die Komponentenbibliothek neu, um Vite zu verwenden. Ich habe ein Problem mit Stilen. Sie sind nicht aufgeteilt, sondern in einer großen style.css-Datei gebündelt. Das bringt mich zu zwei Fragen:

In meinem vorherigen Setup hatte ich Style-Injection, was bedeutete, dass das CSS in die Komponente eingefügt und daher aufgeteilt wurde. Kann ich mit Vite etwas Ähnliches erreichen?

Mein aktuelles Build-Setup sieht so aus:

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

Endgültige dist 文件夹如下所示(我排除了所有 .d.ts Datei):

Wie Sie sehen, gibt es ein großes style.css, das nicht das ist, wonach ich suche.

Gibt es eine Möglichkeit, dieses Problem zu lösen?

P粉464113078P粉464113078304 Tage vor461

Antworte allen(1)Ich werde antworten

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

    Antwort
    0
  • StornierenAntwort