Parcel 输出多个 CSS 文件答案

【问题标题】：Parcel outputs multiple CSS filesParcel 输出多个 CSS 文件
【发布时间】：2021-11-26 01:17:01
【问题描述】：

如何配置 parcel 以获得单个输出 CSS 文件？我使用的是版本 2，似乎默认是为 HTML 文件中引用的每个样式表输出一个单独的 CSS 文件到 dist。例如，使用这个 test.html 文件：

<html>
  <head>
     <link rel="stylesheet" href="./a.css">
     <link rel="stylesheet" href="./b.css">
 </head>
</html>

运行 parcel build test.html 在“dist”下输出两个 css 文件。有没有办法让它输出一个组合文件？

【问题讨论】：

标签： parceljs

【解决方案1】：

您可以使用@import at 规则将多个 css 文件合并到一个包中（请参阅documentation）。

例如，您可以有一个包含以下内容的index.css：

@import "a.css";
@import "b.css";

...然后在您的index.html 文件中引用index.css：

<html>
  <head>
     <link rel="stylesheet" href="./index.css">
 </head>
</html>

编辑：

如果您的应用使用 javascript，实现此目标的另一种方法是从 javascript 文件中导入 css。所以你的 html 文件看起来像这样：

<html>
  <head>
     <script src="./index.js" type="module"></script>
 </head>
</html>

...您的 index.js 文件将如下所示：

import "./a.css";
import "./b.css";
// The rest of your app...

【讨论】：

感谢您的回答。这很有效，也是我在发布我的问题后最终找到的方法。不过，我似乎是一种解决方法。我希望可能有一些配置选项。但是，改变这种做事方式对我来说并不费力。我可能会将此标记为“已接受”，但会稍等。
谢谢！我添加了另一种通过 JavaScript 执行此操作的方法。我还浏览了包裹源代码，我不确定是否有一种方法可以通过单独的配置进行开箱即用。如果你写了一个自定义的 bundler 插件是可能的，但这似乎有点过头了。