CSS
CSS 是 Rspack 的一等公民，Rspack 内置了对 CSS 的处理能力，你无需额外的配置即可使用。
我们默认会将 *.css 结尾的文件视为 CSS 模块类型，将 *.module.css 结尾的文件视为 CSS Modules 模块类型。
如果你打算从 Webpack 进行迁移，那么你可以去除配置中的 css-loader 或 style-loader 以使用 Rspack 内置的 CSS 处理能力，详情可以参考迁移指南。
CSS Modules
Rspack 默认将扩展名为 *.module.css 的文件视为 CSS Modules，你可以在 JavaScript 文件中导入它，然后将 CSS 文件中定义的每个类作为模块的导出来访问。
你可以使用命名空间导入：
index.js
import * as styles from './index.module.css';
document.getElementById('element').className = styles.red;
也可以使用具名导入：
import { red } from './index.module.css';
document.getElementById('element').className = red;
要在 Rspack 中启用默认导入方式，你需要在 rspack.config.js 文件中将 namedExports 配置为 false。这允许你在用到 CSS Modules 时，除了命名空间导入和具名导入，也能通过默认导入整个样式模块：
rspack.config.js
module.exports = {
module: {
parser: {
'css/auto': {
namedExports: false,
},
},
},
};
现在你可以使用默认导入：
import styles from './index.module.css';
document.getElementById('element').className = styles.red;
更多关于 CSS Modules 的配置请参考 module.parser.css。
PostCSS
Rspack 支持使用 postcss-loader，你可以这样配置：
npm add postcss postcss-loader -D
rspack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
// ...
},
},
},
],
// 如果你需要将 '*.module.css' 视为 CSS Module 那么将 'type' 设置为 'css/auto' 否则设置为 'css'
type: 'css/auto',
},
],
},
};
上述配置会将所有 *.css 文件经过 postcss-loader 处理，并将生成的结果交给 Rspack 完成 CSS 后续流程的处理。
Sass
Rspack 支持使用 sass-loader，你可以这样配置：
npm add sass-embedded sass-loader -D
rspack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(sass|scss)$/,
use: [
{
loader: 'sass-loader',
options: {
// 同时使用 `modern-compiler` 和 `sass-embedded` 可以显著提升构建性能
// 需要 `sass-loader >= 14.2.1`
api: 'modern-compiler',
implementation: require.resolve('sass-embedded'),
},
},
],
// 如果你需要将 '*.module.(sass|scss)' 视为 CSS Module 那么将 'type' 设置为 'css/auto' 否则设置为 'css'
type: 'css/auto',
},
],
},
};
上述配置会将所有 *.sass 和 *.scss 文件经过 sass-loader 处理，并将生成的结果交给 Rspack 完成 CSS 后续流程的处理。
Less
Rspack 支持使用 less-loader，你可以这样配置：
npm add less less-loader -D
rspack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
{
loader: 'less-loader',
options: {
// ...
},
},
],
// 如果你需要将 '*.module.less' 视为 CSS Module 那么将 'type' 设置为 'css/auto' 否则设置为 'css'
type: 'css/auto',
},
],
},
};
上述配置会将所有 *.less 文件经过 less-loader 处理，并将生成的结果交给 Rspack 完成 CSS 后续流程的处理。
Tailwind CSS
Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了一系列样式类，它们能直接在脚本标记语言中组合起来，构建出任何设计。
将 Tailwind CSS 作为 PostCSS 插件安装，是将其与 Rspack 整合的最佳方式。
安装 Tailwind CSS
在你的项目中安装 tailwindcss、autoprefixer、postcss 和 postcss-loader 这些依赖：
npm add tailwindcss autoprefixer postcss postcss-loader -D
配置 Tailwind CSS
安装完成后，你需要在 rspack.config.js 中配置 postcss-loader 来处理 CSS 文件，然后在 postcssOptions.plugins 中添加 tailwindcss。
下面是一个处理 .css 文件的配置示例，如果你需要处理 .scss 或 .less 文件，可以参考该示例进行修改。
rspack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
},
],
type: 'css',
},
],
},
};
到此为止，你已经完成了在 Rspack 中使用 Tailwind CSS 所需的构建配置。
接下来你可以按照 Tailwind CSS 官方文档中的步骤，添加 Tailwind CSS 所需的配置和代码，即可开始使用。
