[vitejs/vite]vite 打包之后 css 文件丢失

2024-06-28 786 views
1
Describe the bug

在使用 @vitejs/plugin-legacy 插件,并且配置 build.cssCodeSplit 为 true 时,打包之后 css 文件丢失,当 build.cssCodeSplit 设置为true之后,打包后 css 正常

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

export default defineConfig({
  plugins: [
    jsx(),
    legacy({
      targets: ['defaults'],
      polyfills: ['es.object.values'],
    }),
  ],
  build: {
    // 这里加上这个配置
    cssCodeSplit: false,
  },
});

如上述,加上 build.cssCodeSplit 这个配置为 false 后,打包后,css 文件就没了

image

build.cssCodeSplit 这个配置为 true 后,打包后 css 正常

image

Reproduction

https://github.com/keuby/bug-demo.git

System Info
System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz
    Memory: 6.56 GB / 15.84 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.906.0), Chromium (90.0.818.51)
    Internet Explorer: 11.0.19041.1

Used package manager: yarn

回答

1

没看懂……

7

这个问题有解决方案吗

1

可以使用 gulp 这种,在 vite 构建完了之后,再加一个任务用来合并 css

4

@sodatea 使用 vite @2.7.13 @vitejs/plugin-legacy @1.6.4 开启 cssCodeSplit: false, 依然会出现这种情况 css 丢失

4

这个问题要等到 2.8 发布(应该快了)才能修复