How can I load/import a module from a Vite plugin? #15191

NoelDeMartin · 2023-11-30T06:21:07Z

NoelDeMartin
Nov 30, 2023

First of all, this is what I'm trying to achieve. I want to have the following in my index.html file:

<!DOCTYPE html>
<html lang="en" class="h-full w-full">
    <head>
        {{ css('./src/assets/css/inline.css') }}
        <title>App</title>
    </head>
    <body>
        <div id="app></div>
    </body>
</html>

And I want it to be compiled to the following (notice the {{ css(...) }} part):

<!DOCTYPE html>
<html lang="en" class="h-full w-full">
    <head>
        <style>
             <!-- contents of the ./src/assets/css/inline.css file here -->
         </style>
        <title>App</title>
    </head>
    <body>
        <div id="app></div>
    </body>
</html>

I don't care that much about the syntax, but I haven't been able to achieve this out of the box. For example, I thought the following would achieve the same result but it didn't:

<!DOCTYPE html>
<html lang="en" class="h-full w-full">
    <head>
        <link rel="stylesheet" href="./src/assets/css/inline.css?inline">
        <title>App</title>
    </head>
    <body>
        <div id="app></div>
    </body>
</html>

So I ended up doing my own plugin, using transformIndexHtml, and I could achieve it.

However, now I have an additional problem. This works properly for a plain CSS file, but as soon as I do something that needs some preprocessing, it doesn't work (for example, using background: url(...) or importing other css files using postcss's @import). This happens because I am loading the file using node's plain readFileSync, so it isn't using all of Vite's processing pipeline.

How can I load a file's content, from a plugin's transformIndexHtml hook, including all of Vite's preprocessing?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can I load/import a module from a Vite plugin? #15191

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

How can I load/import a module from a Vite plugin? #15191

NoelDeMartin Nov 30, 2023

Replies: 0 comments

NoelDeMartin
Nov 30, 2023