Issues setting up Parcel with Pug and multiple entry points

Question

I am trying to set up Parcel with Pug and multiple entry points. I have combed through the docs but I cannot figure out what I am doing wrong. Right now I have two main issues:

1. The CSS is only being loaded into about.html on build and not index.html.
2. The HTML files are being built but I need them to be built into folders. So about.pug should be built as about/index.html. How can I build the pug files into their respective folders: page/index.html?

Project structure:

 src
    ├── js
    │   └── index.js
    ├── pug
    │   ├── about.pug
    │   ├── index.pug
    │   └── layouts
    │       └── default.pug
    └── styles
        └── main.scss

Both about.pug and index.pug are using a default layout in src/layouts/default.pug.

The SCSS file is being imported in index.js like this:

import "../styles/main.scss";

but for some reason the CSS is only getting imported into about.html and not index.html at build time.

Here are my package.json build scripts:

"scripts": {
   "start": "parcel src/pug/*.pug",
   "build": "parcel build src/pug/*.pug"
}

Here is a repo if you want to take a look: github repository