How to configure esbuild to use css-modules and sass/scss for when bundling?

在使用 esbuild 进行项目构建时，如果需要支持 CSS 模块以及处理 SASS/SCSS，您需要通过插件来增强 esbuild 的功能。esbuild 原生支持 JavaScript 和 TypeScript 的捆绑和压缩，但处理 CSS 模块和 SASS/SCSS 需要额外的配置。下面是如何配置 esbuild 来实现这些功能的步骤：

1. 安装必要的包

首先，您需要安装 esbuild 本身以及处理 CSS 和 SASS 的相关插件。打开您的终端，并执行以下命令：

bash
npm install esbuild
npm install esbuild-plugin-sass
npm install @esbuild-plugins/css-modules

这里，esbuild-plugin-sass 用于支持 SASS/SCSS 文件的编译，而 @esbuild-plugins/css-modules 用于启用 CSS 模块的功能。

2. 配置esbuild

接下来，您需要创建一个 esbuild 的配置文件或者在您的构建脚本中配置 esbuild。以下是一个使用 JavaScript API 配置 esbuild 的示例：

javascript
const esbuild = require('esbuild');
const sassPlugin = require('esbuild-plugin-sass');
const cssModulesPlugin = require('@esbuild-plugins/css-modules');

esbuild.build({
    entryPoints: ['src/index.js'], // 指定入口文件
    bundle: true,                  // 启用捆绑功能
    outdir: 'dist',                // 指定输出目录
    plugins: [
        sassPlugin(),              // 添加 SASS/SCSS 支持插件
        cssModulesPlugin({         // 配置 CSS 模块插件
            localsConvention: 'camelCase', // CSS 类名转换为驼峰式
            generateScopedName: '[name]__[local]___[hash:base64:5]', // 定义生成的类名格式
        })
    ]
}).catch(() => process.exit(1));

3. 使用 CSS 模块和 SASS/SCSS

在您的 JavaScript 或 TypeScript 文件中，您可以这样引入和使用 CSS 模块：

javascript
import styles from './style.module.scss';

console.log("Generated CSS class name:", styles.myClassName);

在这个例子中，style.module.scss 是一个 SASS 文件，其内容可能类似于：

scss
.myClassName {
    color: red;
}

由于我们使用了 CSS 模块插件，.myClassName 会被转换成一个唯一的类名，避免全局命名冲突。

4. 运行构建脚本

最后，运行您的构建脚本，esbuild 将处理入口文件及其依赖，并生成最终的输出文件在 dist 目录中。所有的 SASS/SCSS 文件将被编译成 CSS，且 CSS 类名将按照 CSS 模块的规则被转换和生成。

这样，您就通过 esbuild 配置了对 CSS 模块和 SASS/SCSS 的支持。