CSS Import does not result in injected style when referencing the built versions in the dist directory

[casually-creative]

Describe the bug

When you reference a javascript file that's generated in the dist folder, Vite ignores any CSS imports in the graph. The CSS file does get processed and generated, but Vite does not inject a <link> reference tag in the DOM. Neither a style tag.

Why do I need this?

I'm creating a Vite implementation to provide source file bundling in a .NET Core (Razor Pages or MVC) project. In Razor Pages / MVC it's common practice to place your processed files in the wwwroot directory (dist), and leave your source files somewhere else. Only files inside the wwwroot directory can be accessed by the browser.

So in our projects, the pages always reference javascript files or stylesheets that are processed to the wwwroot directory. We don't reference our original files.

I had this working with snowpack. But since snowpack is deprecated, I tasked myself with moving over to Vite. Everything is working besides this odd behavior.

Reproduction

https://stackblitz.com/edit/vitejs-css-import-issue?file=index.html

Steps to reproduce

• Start from the vanilla-ts template: npm create vite@latest vite-bug-demo -- --template vanilla-ts.
• Install packages with npm i.
• Execute npm run build.
• In the root index.html file, replace <script type="module" src="/src/main.ts"></script> with <script type="module" src="/dist/assets/index-[copy-the-hash].js"></script>.
• Execute npm run dev.

So basically swap out the source file for the dist file.

As you can see, the scripting still works, but the styles are missing. Vite did not inject the tag. This is the same behaviour I have in my .NET 7 Razor Pages project.

System Info

Win10 + Chrome (latest). Bug also occurs on the repro case on StackBlitz.

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 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.

[sapphi-red]

I don't think Vite is doing something wrong or odd here.
The built JS doesn't load any CSS. The CSS part is in the assets/index-3443e464.css file.

Maybe you are looking for the backend integration?

[grinspins]

For the backend integration it would be immensely helpful to have the option to generate a single CSS file per entry.
In the manifest file each entry only includes the CSS files that it directly imports. To get all the required CSS files one must recursively look through all imported chunks to get their CSS as well. The backend integration page actually does not mention this and following the guide as outlined will result in missing styles.
I also don't love that my webserver now depends on the frontend for copying over the manifest.json file.

With one CSS file per entry you could just use a naming convention for both files and simply do

<link rel="stylesheet" href="{{ my_entry }}.css"></link>
<script src="{{ my_entry }}.js"></script>

Disabling CSS code splitting may not be an option for many code bases when they don't have properly scoped CSS. The vite-plugin-css-injected-by-js plugin mentioned below works pretty well, but it has its pitfalls too e.g. I could never get it to work with plotlyjs.

[sapphi-red]

For the backend integration it would be immensely helpful to have the option to generate a single CSS file per entry.
In the manifest file each entry only includes the CSS files that it directly imports. To get all the required CSS files one must recursively look through all imported chunks to get their CSS as well.

Does your manifest output like this?
https://stackblitz.com/edit/vitejs-vite-15jvcu?file=vite.config.js&terminal=dev

I think we should clarify this in the document, or we can even add a new field in the manifest file.
Would you create an issue or a PR?

[grinspins]

Yes it does.
Happy to create an issue and I can give updating the documentation a shot as well.

[samhirtarif]

I've run into a similar problem in the past and so far have found two vite plugins that could help solve this.

The more popular one of those would be vite-plugin-css-injected-by-js. What this does is inject the CSS using JS. I have forked the reproduction stackblitz case you shared and created an example of how you could use it. You would just need to install the plugin and include it in your list of plugins in vite.config.ts. The injectCodeFunction is optional, its just there in cases where nextjs may be used.

The other plugin you could try out is vite-plugin-libcss. What this essentially does is asss an import for the CSS file generated through the build in the build generated JS file.

Hope this helps in case the backend intergations recommended in the comment above is not what you're looking for 😄