Built-in CSS Support
Aleph.js allows you to import a CSS (or Less) file with ESM syntax:
import "../style.css"
or import styles from network:
import "https://esm.sh/tailwindcss/dist/tailwind.min.css"
How It Works
Aleph.js will transform all .css
and .less
imports to js modules. For example:
import "../style.css"
will be transformed to:
import "../style.css.{HASH}.js"
the style.css.{HASH}.js
file looks like:
import { applyCSS } from "https://deno.land/x/aleph/head.ts";
applyCSS("../style.css", `${CSS_CODE}`);
// Support HMR in development mode.
import.meta.hot.accept();
that will be ignored in Deno and applied in browser.
CSS Imports (@import)
Aleph.js doesn't handle @import
in CSS module currently. You need to put the imported CSS files in the public
directory and import them as a absolute URL.
The Import
Component
Importing .css
with ESM syntax will be suggested as a resolve error in VS Code with deno extension. You can ignore it if you can ensure that the import URL is correct.
To supplement this, Aleph.js provides a React Component called Import
that allows you to import module asynchronously:
import React from "https://esm.sh/react"
import { Import } from "https://deno.land/x/aleph/mod.ts"
export default function Page() {
return (
<>
<Import from="../style/about.css" />
<h1>About</h1>
</>
)
}
To learn more about
Import
component, check the Asynchronous Import documentation.
Adding a Global Stylesheet
To add a global stylesheet to your application, import the CSS files within app.tsx
.
Sass
Aleph.js provides a sass-loader
plugin that allows you to import sass
files. To use the plugin please update the aleph.config.js
:
import sass from 'https://deno.land/x/aleph/plugins/sass.ts'
export default {
plugins: [sass, ...],
...
}
then in your code:
import React from "https://esm.sh/react"
import "./style/about.sass"
export default function Page() {
return (
<h1>About</h1>
)
}