CSS Preprocessors

Rasengan.js supports CSS preprocessors like Sass, Less, and Stylus. You can use them by adding the corresponding file extension to your CSS file.

Sass

Rasengan.js has built-in support for integrating with Sass after the package is installed using both the .scss and .sass extensions. You can use component-level Sass via CSS Modules and the .module.scss or .module.sass extension.

First, you need to install sass (opens in a new tab):

npm install --save-dev sass

Then, you can create a .scss or .sass file and import it into your component:

$primary-color: #333;
 
.my-component {
  color: $primary-color;
}

import React from "react";
 
import "./MyComponent.scss";
 
const MyComponent = () => {
  return <div className="my-component">Hello, world!</div>;
};
 
export default MyComponent;

And with CSS Modules:

$primary-color: #333;
 
.component {
  color: $primary-color;
}

import React from "react";
 
import styles from "./MyComponent.module.scss";
 
const MyComponent = () => {
  return <div className={styles.component}>Hello, world!</div>;
};
 
export default MyComponent;

Less

Rasengan.js has built-in support for integrating with Less after the package is installed using the .less extension. You can use component-level Less via CSS Modules and the .module.less extension.

First, you need to install less (opens in a new tab):

npm install --save-dev less

Then, you can create a .less file and import it into your component:

@primary-color: #333;
 
.my-component {
  color: @primary-color;
}

import React from "react";
 
import "./MyComponent.less";
 
const MyComponent = () => {
  return <div className="my-component">Hello, world!</div>;
};
 
export default MyComponent;

Stylus

Rasengan.js has built-in support for integrating with Stylus after the package is installed using the .styl or .stylus extension. You can use component-level Stylus via CSS Modules and the .module.styl or .module.stylus extension.

First, you need to install stylus (opens in a new tab):

npm install --save-dev stylus

Then, you can create a .styl file and import it into your component:

primary-color = #333
 
.my-component
  color primary-color

import React from "react";
 
import "./MyComponent.styl";
 
const MyComponent = () => {
  return <div className="my-component">Hello, world!</div>;
};
 
export default MyComponent;

Next steps