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.

Figure.1 CSS resolve error

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