Skip to content

Commit

Permalink
docs: You can now include CSS manually if it's a top-level entry in y…
Browse files Browse the repository at this point in the history
…our `vite.config.js` (rather than being imported into your JavaScript) via `craft.vite.asset("src/css/app.css")` ([#31](#31))
  • Loading branch information
khalwat committed Jan 25, 2023
1 parent 744c877 commit e1f17b3
Showing 1 changed file with 36 additions and 10 deletions.
46 changes: 36 additions & 10 deletions docs/docs/index.md
Expand Up @@ -611,16 +611,16 @@ In production or otherwise where the Vite dev server is not running, the output
```html

<script>
!function () {
var e = document, t = e.createElement("script");
if (!("noModule" in t) && "onbeforeload" in t) {
var n = !1;
e.addEventListener("beforeload", function (e) {
if (e.target === t) n = !0; else if (!e.target.hasAttribute("nomodule") || !n) return;
e.preventDefault()
}, !0), t.type = "module", t.src = ".", e.head.appendChild(t), t.remove()
}
}();
!function () {
var e = document, t = e.createElement("script");
if (!("noModule" in t) && "onbeforeload" in t) {
var n = !1;
e.addEventListener("beforeload", function (e) {
if (e.target === t) n = !0; else if (!e.target.hasAttribute("nomodule") || !n) return;
e.preventDefault()
}, !0), t.type = "module", t.src = ".", e.head.appendChild(t), t.remove()
}
}();
</script>
<script type="nomodule" src="https://example.com/dist/assets/polyfills-legacy.8fce4e35.js"></script>
<script type="module" src="https://example.com/dist/assets/app.56c9ea9d.js" crossorigin></script>
Expand Down Expand Up @@ -714,6 +714,32 @@ If you need to access assets that are in the `public/` directory from Twig, ther
{{ craft.vite.asset("src/images/quote-open.svg", true) }}
```
#### Using `craft.vite.asset` with CSS
If you are using Vite 3.x or later, you can also use `craft.vite.asset` to manually include CSS that is a top-level entry in your `vite.config.js` (rather than being imported into your JavaScript):
```twig
{{ craft.vite.asset("src/css/app.css") }}
```
This assumes your `vite.config.js` looks something like this:
```js
build: {
emptyOutDir: true,
manifest: true,
rollupOptions: {
input: {
app: 'src/js/app.ts',
css: 'src/css/app.css'
},
output: {
sourcemap: true
},
}
},
```
### The `.inline()` function
The Vite plugin also includes a `.inline()` function that inlines the contents of a local file (via path) or remote
Expand Down

0 comments on commit e1f17b3

Please sign in to comment.