Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS import regression in Vite 2.8

See original GitHub issue

Describe the bug

When you import CSS using the inline flag, like

import prismCss from 'prismjs/themes/prism-okaidia.css?inline';

the value is available in development mode but becomes an empty string in the built version

Reproduction

https://github.com/Artur-/vite-vaadin-problem6

System Info

System:
    OS: macOS 12.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.75 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.3.0 - ~/.nvm/versions/node/v17.3.0/bin/node
    npm: 8.3.0 - ~/.nvm/versions/node/v17.3.0/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Firefox: 95.0.2
    Safari: 15.3
  npmPackages:
    vite: ^2.8.0-beta.6 => 2.8.0-beta.6

Used Package Manager

npm

Logs

No response

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

Issue Analytics

State:
Created 2 years ago
Comments:6 (6 by maintainers)

Top GitHub Comments

1reaction

patak-devcommented, Feb 7, 2022

@bluwy looks like it was never added to the documentation, but ?inline was added here https://github.com/vitejs/vite/pull/2148#issuecomment-885706792 to be able to do Web Components IIRC

0reactions

Artur-commented, Feb 7, 2022

Interestingly enough this fails only when importing from node_module, if you import from a file in the project it works as expected also in 2.8. That is why this test still passes: https://github.com/vitejs/vite/blob/651e0ba0530e80e66e3f4698a9f9dc6c385595cd/packages/playground/css/main.js#L69-L70

Top Results From Across the Web

Features | Vite

@import Inlining and Rebasing Vite is pre-configured to support CSS @import inlining via postcss-import . Vite aliases are also respected for CSS @import...

packages/vite/CHANGELOG.md · Gitee 极速下载/ViteJS

resolveDependencies will be called both for JS dynamic imports preload lists and also for HTML preload lists for chunks imported from entry HTML...

Changelog - Cypress Documentation

Fixed an issue where updating a component would not trigger the supportFile to reload imported stylesheets. This is fixed by doing a full...

vitepress | Yarn - Package Manager

Fast, reliable, and secure dependency management.

Vxf - River Thames Conditions - Environment Agency - GOV.UK

Mine and blade 2.8.0.1 download, Amelander vlag, Dissolution of company form, ... Obamacare nightmare 2014, Lepa jovik, Hyperopic lasik regression, ...