Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vite 打包之后 css 文件丢失 #3296

Closed
keuby opened this issue May 7, 2021 · 9 comments · Fixed by #6584
Closed

vite 打包之后 css 文件丢失 #3296

keuby opened this issue May 7, 2021 · 9 comments · Fixed by #6584

Comments

@keuby
Copy link

keuby commented May 7, 2021

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

@sodatea
Copy link
Member

sodatea commented May 7, 2021

没看懂……

@liuhanqu
Copy link

liuhanqu commented May 8, 2021

 build: {
    cssCodeSplit: false,
  }

set cssCodeSplit value to false,the assets without css file
according to document https://vitejs.dev/config/#build-csscodesplit

If disabled, all CSS in the entire project will be extracted into a single CSS file.

there is expect a css file in assets

@wxxcarl
Copy link

wxxcarl commented May 19, 2021

I meat the same problem

@iou90
Copy link

iou90 commented Oct 15, 2021

Same problem here.
vite: 2.6.7
@vitejs/plugin-legacy: 1.6.2

@shihao905
Copy link

这个问题有解决方案吗

@keuby
Copy link
Author

keuby commented Nov 26, 2021

这个问题有解决方案吗

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

@xmsz
Copy link

xmsz commented Jan 2, 2022

same here

sodatea added a commit to sodatea/vite that referenced this issue Jan 21, 2022
Fixes vitejs#3296
Supersedes vitejs#3317

The asset emitting conflict may also exist for other types of assets,
but let's fix the CSS one first.

The conflict here is due to the `hasEmitted` flag that was originally
intended to avoid duplicated CSS for multiple output formats
vitejs@6bce108#diff-2cfbd4f4d8c32727cd8e1a561cffbde0b384a3ce0789340440e144f9d64c10f6R262-R263

When the legacy plugin is used, the flag was set to `true` for the
emitted CSS of the legacy bundle.
But the legacy plugin would remove all its emitted assets later to avoid
duplication.
So this logic results in no CSS to be actually emitted.

In this PR, I used a `__vite_skip_asset_emit__` flag to prevent the
CSS `generateBundle` from executing for the legacy build.
If other asset emitting plugins encounter similar issues, this flag
can be reused.
patak-dev pushed a commit that referenced this issue Jan 28, 2022
Fixes #3296
Supersedes #3317

The asset emitting conflict may also exist for other types of assets,
but let's fix the CSS one first.

The conflict here is due to the `hasEmitted` flag that was originally
intended to avoid duplicated CSS for multiple output formats
6bce108#diff-2cfbd4f4d8c32727cd8e1a561cffbde0b384a3ce0789340440e144f9d64c10f6R262-R263

When the legacy plugin is used, the flag was set to `true` for the
emitted CSS of the legacy bundle.
But the legacy plugin would remove all its emitted assets later to avoid
duplication.
So this logic results in no CSS to be actually emitted.

In this PR, I used a `__vite_skip_asset_emit__` flag to prevent the
CSS `generateBundle` from executing for the legacy build.
If other asset emitting plugins encounter similar issues, this flag
can be reused.
@radiorz
Copy link

radiorz commented Feb 8, 2022

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

@sodatea
Copy link
Member

sodatea commented Feb 8, 2022

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

@github-actions github-actions bot locked and limited conversation to collaborators Feb 23, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
9 participants