我正在尝试扩展esbuildCSS 支持以包括CSS Modules和Sass/Scss。因此，我一直在使用定制插件——利用 esbuild 插件 API。首先，我尝试过：
esbuild-sass-plugin：顾名思义，这个插件负责.scss解释/转译。然而，它未能适应CSS Modules（尽管宣传其可扩展性）。为了适应缺少的支持CSS Modules，我添加了另一个esbuild plugin：
esbuild-css-modules-plugin：该插件也未能提供对CSS Modules.Node：14。esbuild：^0.11.11。esbuild-css-modules-plugin：^2.3.2。esbuild-sass-plugin：^2.2.6。sass：^1.53.0。typescript：^4.2.3。CSS Module支持？package.json - 相关构建脚本
"build:dev": "node build.js esbuild-browser:dev"
build.js（esbuild 的入口点）
const sassPlugin = require("esbuild-sass-plugin").default;
const cssModulesPlugin = require("esbuild-css-modules-plugin");
let options = {
bundle: true,
minify: true,
minifyWhitespace: true,
sourcemap: true,
target: "es2018",
};
let builds = {
"esbuild-browser": () => ({
...options,
platform: "browser",
format: "esm",
sourcemap: "external",
outfile: "build/esbuild/browser.js",
entryPoints: ["src/browser.ts"],
plugins: [sassPlugin()],
}),
"esbuild-browser:dev": () => ({
...options,
watch: true,
platform: "browser",
format: "esm",
outfile: "build/esbuild/browser.js",
entryPoints: ["src/browser.ts"],
plugins: [sassPlugin(), cssModulesPlugin()],
}),
};
require("esbuild")
.build(builds[process.argv[2]]())
.catch(() => process.exit(1));
ScrawlComponent.tsx（注意classNamefor <span/>）
import React from "react";
import styles from "./styles.scss";
type Props = {
content: string;
};
const ScrawlComponent = (props: Props) => {
const { content } = props;
return (
<span
id="animation_link_target_text"
className={styles.animation_link_target_text}
>
{content}
</span>
);
};
export default ScrawlComponent;
输出 HTML（注意 ABSENTclassName为<span/>）
<html>
<head></head>
<body>
<div id="root"><span id="animation_link_target_text"></span> </div>
<script src="./esbuild/browser.js"></script>
<link rel="stylesheet" type="text/css" href="./esbuild/browser.css">
</body>
</html>
CSS 模块支持要求您的 css 文件在您的情况下以后缀“.module.css”或“.module.scss”命名。
要在支持下使用 CSS 模块.scss，您需要使用esbuild-scss-modules-plugin而不是 esbuild-css-modules-plugin。
| 归档时间： |
|
| 查看次数： |
2706 次 |
| 最近记录： |