Import CSS Files#

Rsbuild provides out-of-the-box support for CSS, including PostCSS, CSS Modules, CSS preprocessors, CSS inlining, and CSS compression.

In addition, Rsbuild also provides multiple configs to customize the compile rules of style resources.

Using PostCSS#

Rsbuild has built-in PostCSS to transform the CSS code. You can configure PostCSS in the following ways:

1. Rsbuild uses postcss-load-config to load the PostCSS configuration file in the root directory of the current project, such as postcss.config.js:

module.exports = {
  'postcss-px-to-viewport': {
    viewportWidth: 375,
  },
};

2. Configure the postcss-loader through Rsbuild's tools.postcss option, which supports modifying the built-in configuration through a function, for example:

export default {
  tools: {
    postcss: (opts) => {
      const viewportPlugin = require('postcss-px-to-viewport')({
        viewportWidth: 375,
      });
      opts.postcssOptions.plugins.push(viewportPlugin);
    },
  },
};

When you configure both the postcss.config.js file and the tools.postcss option, both will take effect, and the tools.postcss option will take precedence.

Builtin PostCSS plugins#

Rsbuild has built-in autoprefixer plugin, which is used to add vendor prefixes to CSS rules. If you need to configure the target browser, you can use browserslist.

Using CSS Modules#

Rsbuild supports CSS Modules by default, please read the Using CSS Modules chapter for the complete usage of CSS Modules.

Using CSS preprocessors#

Rsbuild supports popular CSS preprocessors through plugins, including Sass, Less and Stylus. See how to use them:

• Sass Plugin
• Less Plugin
• Stylus Plugin

CSS-in-JS#

Please read the React - CSS-in-JS section to learn how to use common CSS-in-JS libraries in Rsbuild.

CSS Minify#

During the production build, Rsbuild compresses static assets such as CSS and JS to provide better transmission efficiency.

Rsbuild by default uses the built-in SwcCssMinimizerRspackPlugin plugin from Rspack to automatically compress CSS code during production builds.

You can customize the CSS minimizer by using the CSS Minimizer plugin to switch to cssnano or other tools for CSS compression.

Inline CSS Files#

By default, Rsbuild will extract CSS into a separate .css file and output it to the dist directory.

If you want to inline styles into your JS file, you can set output.injectStyles to true to disable CSS extraction logic. When the JS file is requested by the browser, JS dynamically inserts the <style> tag into the Html to load the CSS styles.

export default {
  output: {
    injectStyles: true,
  },
};

This will increase the size of your JS Bundle, so it is usually not recommended to disable the CSS extraction.

Import CSS in node_modules#

You can directly import CSS files in node_modules.

• Import in a component:

// Import the Arco Design style:
import '@arco-design/web-react/dist/css/arco.css';

• Import in a style file:

/* reference normalize.css */
/* https://github.com/necolas/normalize.css */
@import 'normalize.css';

body {
  /* */
}