我目前正在重写组件库的构建步骤以使用 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>
有办法解决这个问题吗?
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
如果您还没有解决问题,我能找到的最简单的方法是将插件
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 });