Esbuild：节点模块 CSS 不包含在包中

Question

我正在尝试使用 EsBuild 创建一个库。我在我的库中使用 keen 滑块，我在主 ts 文件中导入 keen-slider/keen-slider.min.css。

import "keen-slider/keen-slider.min.css"

但是在输出的 css 文件中，不存在 keen slider css。而不是“导入“keen-slider/keen-slider.min.css””行本身出现在输出 js 文件中。

谁能告诉我如何在包中导入节点模块 css？

Answer 1

与我尝试加载的 CSS 不完全相同，但使用 esbuild-sass-plugin 对我有用。别被名字骗了，它可以与常规 CSS 文件完美配合。我尝试了其他各种看起来可以工作的插件，但都失败了。

const esbuild = require("esbuild");
const {sassPlugin} = require("esbuild-sass-plugin");

esbuild.build({
    entryPoints: ["app.jsx"],
    bundle: true,
    watch: true,
    outfile: "app.js",
    plugins: [
        sassPlugin({type: "style"}),
    ],
});

Answer 2

在 esbuld css 文档中

从 JavaScript 导入您还可以从 JavaScript 导入 CSS。什么时候 你这样做，esbuild 将收集给定引用的所有 CSS 文件 入口点并将其捆绑到旁边的同级 CSS 输出文件中 该 JavaScript 入口点的 JavaScript 输出文件。所以如果 esbuild 生成 app.js 它还会生成包含所有 CSS 的 app.css app.js 引用的文件。这是导入 CSS 文件的示例 来自 JavaScript：

import './button.css'

export let Button = ({ text }) =>
  <div className="button">{text}</div>

这应该默认工作。但是如果你对此有疑问，你可以使用 On-load callbacks。文档显示了

txt

文件的示例。但是如果你使用

css

就会有引号并且 '' 会发生冲突。所以我们会有无效的javascript。所以我们需要从数据中转义``。

let exampleOnLoadPlugin = {
  name: 'example',
  setup(build) {
    // Load ".txt" files and return an array of words
    build.onLoad({ filter: /.css$/ }, async (args) => {
      const { data } = await axios.get(args.path);
      const escapedData = data
          .replace(/\n/g, "") // first replace will collapse css into one single line. new lines are removed
          .replace(/"/g, '\\"') // this will escape all ""
          .replace(/'/g, "\\'"); // this will escape all ''

      // you could inject the css to the document
      //  const contents = `
          const style = document.createElement('style');
          style.innerText = '${escapedData}';
          document.head.appendChild(style);
      //  `;
    })
    // or you may need to return like this
    return {
        contents: JSON.stringify(escapedData),
        loader: 'css',
  }
  },
}

你需要注册这个插件

await esbuild.build({
  entryPoints: ['app.js'],
  bundle: true,
  outfile: 'out.js',
  plugins: [exampleOnLoadPlugin],
})

Answer 3

ESbuild 不支持 CSS 导入。您可以使用 esbuild-plugin-css-modules。

第一步：

npm install --save-dev esbuild-plugin-css-modules

第二步： 更改构建脚本

const { build } = require('esbuild');
const cssModulesPlugin = require('esbuild-plugin-css-modules');

build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [cssModulesPlugin()]
}).catch(() => process.exit(1));

第三步： 导入 css 文件。

import "./path/to/keen-slider.min.css";

Answer 4

要在使用 EsBuild 时将节点模块中的 CSS 文件包含在您的包中，您可以按照以下步骤操作：

1. 安装必要的依赖项。 EsBuild 需要

   esbuild

   和

   esbuild-plugin-import-css

   来处理 CSS 导入。

npm install --save-dev esbuild esbuild-plugin-import-css

2. 在您的

   package.json

   文件中创建一个构建脚本来配置EsBuild。

{
  "scripts": {
    "build": "esbuild --bundle src/index.ts --outfile=dist/bundle.js --loader:.ts=ts --loader:.css=css --plugins=import-css"
  }
}

3. 像以前一样，将 CSS 文件导入 TypeScript 文件。

import "keen-slider/keen-slider.min.css";

4. 使用以下命令运行构建脚本：

npm run build

这将触发 EsBuild 打包您的代码并将 CSS 文件包含在输出包中。

esbuild-plugin-import-css

插件处理导入 CSS 文件并确保它们正确包含在包中。

确保在必要时根据您的项目结构调整路径和构建配置。