CSS Modules

Rasengan.js has built-in support for CSS Modules using the .module.css extension.

CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same class name in different files without worrying about collisions. This behavior makes CSS Modules the ideal way to include component-level CSS.

Example

CSS Modules can be imported into any file inside the src directory to be used to style components.

Global Styles

Global styles can be added to the src/styles directory and imported into the src/main.tsx file.

styles/index.css

body,
html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}
 
a {
  text-decoration: none;
}

src/main.tsx

Now you have to import your global style into the src/main.tsx file.

// These styles apply to every route in the application
import "@/styles/index.css";
 
import { type AppProps } from "rasengan";
import AppRouter from "@/app/app.router";
 
export default function App({ Component, children }: AppProps) {
  return <Component router={AppRouter}>{children}</Component>;
}

External Stylesheets

Stylesheets published by external packages can be imported in the src/main.tsx file or anywhere else.

import "@rasenganjs/image/lib/styles/index.css";
 
import { type AppProps } from "rasengan";
import AppRouter from "@/app/app.router";
 
export default function App({ Component, children }: AppProps) {
  return <Component router={AppRouter}>{children}</Component>;
}

Next steps