老师请问：库模式打包组件后，样式单独抽离到独立的css文件中，为什么在js中仍然包含样式

Question

vite.confg

import vue from '@vitejs/plugin-vue';
import jsx from '@vitejs/plugin-vue-jsx';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';

// https://vitejs.dev/config/
export default defineConfig({
	clearScreen: false,
	plugins: [
		vue(),
		jsx(),
		dts({
			entryRoot: './src',
			outputDir: 'types',
			staticImport: true,
			cleanVueFileName: true,
			exclude: ['**/env.d.ts', '**/client.d.ts']
		})
	],
	build: {
		lib: {
			entry: './src/main.ts',
			name: 'Owl',
			fileName: (format) => `owl.${format}.js`
		},
		rollupOptions: {
			external: ['vue'],
			output: {
				globals: {
					vue: 'Vue'
				}
			}
		}
	},
	test: {
		environment: 'happy-dom'
	}
});

组件中的样式

源码:

<template>
	<div v-show="display__" v-if="refresh__" :id="id__" :class="block" :style="{ ...theme__?.vars }">
		<button>dddd</button>
	</div>
</template>

<script lang="tsx">
... 省略
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>

样式文件

源码

.o-button{
    transform: rotate(20deg);
    width: rem(16px);
    color: var(--o-button-color,var(--color));
}

打包后的样式 被抽离到单独css文件中，这个没有问题

打包后的js 中为啥还有样式呢

源码

var oButton_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ 
(() => ".o-button[data-v-580eca2c]{-webkit-transform:rotate(20deg);transform:rotate(20deg);width:1rem;color:var(--o-button-color, var(--color))}\n")();

Answer 1

好帮手慕小李 2025-02-10 10:37:03

可能是如下原因造成的：

1. CSS 代码分割配置：Vite 默认会进行 CSS 代码分割，将样式提取到单独的文件中。如果希望 CSS 内联到 JavaScript 中，可以在 vite.config.js 中设置 cssCodeSplit: false 来禁用 CSS 代码分割。

2. 打包配置问题：可能是由于 vite.config.js 中的打包配置不正确。例如，如果使用了 rollupOptions 来自定义打包行为，可能需要确保配置正确以支持样式的单独抽离。

3. 插件影响：某些 Vite 插件可能会影响样式的打包方式。例如，vite-plugin-css-injected-by-js 插件会将 CSS 代码通过 JavaScript 注入到页面中，这可能导致样式被包含在 JavaScript 文件中。

4. 预处理器或后处理器配置：如果使用了 CSS 预处理器（如 SCSS、Less）或后处理器（如 PostCSS），可能需要检查相关的配置文件（如 postcss.config.js）是否正确配置了输出方式。

5. 构建模式：在开发模式下，Vite 可能会将样式内联到 JavaScript 文件中以支持热更新。确保在生产模式下构建项目，以查看样式是否被正确抽离。

6. 第三方库的打包：如果第三方库的样式没有被正确处理，可能需要在 vite.config.js 中使用 manualChunks 来手动指定这些库的打包方式，确保它们被单独打包。