包裹输出多个CSS个文件

Question

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

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

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

Answer 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...

Parcel outputs multiple CSS files