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>
  )
}