Styling

Rakkas allows you to use all styling options available to React apps.

Importing a .css file will inject its content to the page via a <style> tag. During development, Rakkas tries hard to discover CSS dependencies of modules to prevent the flash of unstyled content (FOUC) but it can still happen in some rare cases. When you build your app for production, imported styles will be split into external .css files and everything will work even with JavaScript disabled.

For component-scoped styles, Rakkas supports CSS modules with the usual naming convention .module.css.

If the project contains a valid PostCSS config, it will be automatically applied to all imported CSS. CSS preprocessors are also supported out of the box: You just need to install your preferred processor (sass, less, or stylus) to enable support for .scss, .sass, .less, .styl and .stylus file extensions. See Vite's documentation for further details.

Rakkas also allows you to use CSS-in-JS solutions. See, for example, the Emotion example. Please bear in mind that CSS-in-JS solutions may have implementation and performance issues when performing streaming SSR.