国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

在使用 Vite 構(gòu)建的 React 組件庫中拆分或注入樣式
P粉464113078
P粉464113078 2024-01-10 17:00:11
[React討論組]

我目前正在重寫組件庫的構(gòu)建步驟以使用 Vite。我遇到了有關(guān)樣式的問題,它們沒有被拆分,而是捆綁到一個大的 style.css 文件中。這給我?guī)砹藘蓚€問題:

  • 當(dāng)我將軟件包安裝到另一個項(xiàng)目中時(shí),它不會自動包含在內(nèi)。如果我導(dǎo)入一個組件,style.css 不會神奇地導(dǎo)入。
  • 我正在導(dǎo)入我實(shí)際未使用的組件的樣式。

在我之前的設(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粉464113078
P粉464113078

全部回復(fù)(1)
P粉007288593

如果您還沒有解決問題,我能找到的最簡單的方法是將插件 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
});
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長!
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號