Page-specific Scripts and Styles

Methanol features built-in support for page-specific assets. It automatically detects and includes scripts or stylesheets located in the same directory as a page file, provided they share the same base filename.

Mechanism

Consider the following project structure:

pages/
  guide/
    components.mdx
    components.css
    components.js

When the /guide/components route is rendered, both components.css and components.js are automatically injected into the page <head>.

Supported File Extensions

Stylesheets:

.css

Scripts:

.js, .mjs, .cjs
.ts, .mts, .cts

Usage Example

pages/
  about.mdx
  about.css
  about.ts

In this configuration, about.css and about.ts will be loaded exclusively for the /about route.

Important Notes

Resolution: Resource resolution is relative to the page's parent directory.
Global Assets: Global assets, such as pages/style.css and pages/index.js, are always applied across all pages in addition to page-specific ones.