Rsbuild 内置多种常用的样式资源处理方式,包括 Less / Sass 预处理器、PostCSS、CSS Modules、CSS 内联和 CSS 压缩。
除此之外,Rsbuild 也提供了多个配置项来自定义样式资源的处理规则。
Rsbuild 内置了社区流行的 CSS 预处理器,包括 Less 和 Sass。
默认情况下,你不需要对 Less 和 Sass 进行任何配置。如果你有自定义 loader 配置的需求,可以通过配置 tools.less、tools.sass 来进行设置。
你也可以在 Rsbuild 中使用 Stylus,只需要安装 Rsbuild 提供的 Stylus 插件即可,使用方式请参考 Stylus 插件。
Rsbuild 内置了 PostCSS 来转换 CSS 代码。你可以通过以下方式来配置 PostCSS:
postcss.config.js
:当你同时配置 postcss.config.js
文件和 tools.postcss
选项时,两者都会生效,并且 tools.postcss
的优先级更高。
Rsbuild 内置了autoprefixer 插件,来自动补齐 CSS 的浏览器前缀。如果你需要配置目标浏览器,可以使用 browserslist 进行配置。
如果你的项目中已经注册了 autoprefixer 插件,Rsbuild 不会再次注册 autoprefixer 插件。
请阅读 使用 CSS Modules 章节来了解 CSS Modules 的完整用法。
在生产环境构建时, Rsbuild 会将 CSS、JS 等静态资源进行压缩,以达到更好的传输效率。
Rsbuild 默认使用 Rspack 内置的 SwcCssMinimizerRspackPlugin
插件,在生产环境构建时自动压缩 CSS 代码。
你可以通过 CSS Minimizer 插件 来自定义 CSS 压缩工具,切换到 cssnano 或其他工具进行 CSS 压缩。
默认情况下,Rsbuild 会把 CSS 提取为独立的 .css
文件,并输出到构建产物目录。
如果你希望将样式内联到 JS 文件中,可以将 output.injectStyles 设置为 true
来禁用 CSS 提取逻辑。当浏览器请求到 JS 文件后,JS 将动态地向 HTML 插入 <style>
标签,以此加载 CSS 样式。
这将会增大你的 JS Bundle 体积,因此通常情况下,不太建议禁用 CSS 提取逻辑。
你可以直接引用 node_modules 里的样式文件。