Parcel outputs multiple CSS files

How do I configure parcel so that I get a single output CSS file? I am using version 2, and it seems that the default is to output a separate CSS file to dist for each stylesheet referenced in the HTML file. For instance, with this test.html file:

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

running parcel build test.html outputs two css files under "dist". Is there a way to make it output one combined file?

Solution

You can use the @import at-rule to combine multiple css files into a single bundle (see documentation).

For example, you could have an index.css with this content:

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

...and then reference index.css in your index.html file:

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

See this example repo.

Edit:

Another way to achieve this goal, if your app uses javascript, is to do the css imports from a javascript file. So your html file would look like this:

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

...and your index.js file would look like this:

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