CSS#

CSS is a first-class citizen in Rspack, and Rspack has several built-in features to support CSS bundling.

Enabling CSS Support#

You can choose from the following options:

Native CSS Support#

Rspack provides the experiment.css option, an experimental feature introduced in webpack 5 to enable native CSS support. Rspack has improved this feature and plans to enable it by default in Rspack 2.0.

If you create a new project based on Rspack, it is recommended to use this method.

module.exports = {
  experiments: {
    css: true,
  },
};

After enabling experiment.css, Rspack will support the following three module types, which you can set on the rule using type:

• css: Used to handle normal CSS files.
• css/module: Used to handle CSS Modules.
• css/auto: Automatically determines whether a file is a normal CSS file or CSS Modules based on the file extension. Files ending with *.module.css are treated as CSS Modules.

For files ending in *.css, Rspack will treat them as type: 'css/auto' by default. You can also configure type: 'css/auto' to customize which files are treated as CSS files. For example, treat .less files as CSS files:

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        type: 'css/auto', // 👈
        use: ['less-loader'],
      },
    ],
  },
};

Using CssExtractRspackPlugin#

Rspack supports using css-loader and CssExtractRspackPlugin to generate standalone CSS files.

If you are migrating a webpack project that uses mini-css-extract-plugin, it is recommended to replace it with CssExtractRspackPlugin. Their functionality and options are basically the same.

• Install css-loader:

npm add css-loader -D

• Add configuration:

const rspack = require('@rspack/core');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],
        type: 'javascript/auto',
      },
    ],
  },
  plugins: [new rspack.CssExtractRspackPlugin({})],
};

Refer to the migration guide to learn how to migrate from webpack.

Using style-loader#

Rspack supports using css-loader and style-loader to inject CSS via <style> tags. This method does not generate standalone CSS files but inline the CSS content into JS files.

• Install css-loader and style-loader:

npm add css-loader style-loader -D

• Add configuration:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
        type: 'javascript/auto',
      },
    ],
  },
};

CSS Modules#

By default, Rspack treats files with a *.module.css extension as CSS Modules. You can import them into your JavaScript files, and then access each class defined in the CSS file as an export from the module.

.red {
  color: red;
}

You can use namespace import:

import * as styles from './index.module.css';
document.getElementById('element').className = styles.red;

You can also use named import:

import { red } from './index.module.css';
document.getElementById('element').className = red;

To enable default imports in Rspack, you need to set namedExports to false in your rspack.config.js file. This allows you, when using CSS Modules, to import the entire style module by default import, in addition to namespace imports and named imports:

module.exports = {
  module: {
    parser: {
      'css/auto': {
        namedExports: false,
      },
    },
  },
};

Now you can use default import:

import styles from './index.module.css';
document.getElementById('element').className = styles.red;

For more on CSS Modules configuration, please refer to module.parser.css.

PostCSS#

Rspack supports postcss-loader, which you can configure like this:

npm add postcss postcss-loader -D

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                // ...
              },
            },
          },
        ],
        // set to 'css/auto' if you want to support '*.module.css' as CSS Modules, otherwise set type to 'css'
        type: 'css/auto',
      },
    ],
  },
};

The above configuration will have all *.css files processed by postcss-loader. The output will be passed to Rspack for CSS post-processing.

Sass#

Rspack supports sass-loader, which you can configure like this:

npm add sass-embedded sass-loader -D

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            loader: 'sass-loader',
            options: {
              // using `modern-compiler` and `sass-embedded` together significantly improve build performance,
              // requires `sass-loader >= 14.2.1`
              api: 'modern-compiler',
              implementation: require.resolve('sass-embedded'),
            },
          },
        ],
        // set to 'css/auto' if you want to support '*.module.(scss|sass)' as CSS Modules, otherwise set type to 'css'
        type: 'css/auto',
      },
    ],
  },
};

The above configuration runs all *.sass and *.scss files through the sass-loader and passes the resulting results to Rspack for CSS post-processing.

Less#

Rspack supports less-loader, which you can configure like this:

npm add less less-loader -D

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'less-loader',
            options: {
              // ...
            },
          },
        ],
        // set to 'css/auto' if you want to support '*.module.less' as CSS Modules, otherwise set type to 'css'
        type: 'css/auto',
      },
    ],
  },
};

The above configuration runs all *.less files through the less-loader and passes the generated results to Rspack for CSS post-processing.

Tailwind CSS#

Tailwind CSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with Rspack.

Install Tailwind CSS#

Please install tailwindcss,autoprefixer,postcss and postcss-loader in your project.

npm add tailwindcss autoprefixer postcss postcss-loader -D

Configure Tailwind CSS#

Once installed, you need to configure postcss-loader in rspack.config.js to handle CSS files, and then add tailwindcss to postcssOptions.plugins.

Here is an example configuration for handling .css files, if you need to handle .scss or .less files, you can refer to this example for modifications.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: {
                  tailwindcss: {},
                  autoprefixer: {},
                },
              },
            },
          },
        ],
        type: 'css',
      },
    ],
  },
};

At this point, you have completed the build configuration required to use Tailwind CSS in Rspack.

Next you can follow the steps in the Tailwind CSS Documentation to add the required configuration and code for Tailwind CSS and start using it.