Parcel build breaks when trying to build all Sass/JS but not if I specify file names? What am I missing?

[RachelRVasquez]

I'm trying to convert a WordPress project of mine to use Parcel to compile JS and Sass files instead of Grunt/Webpack. I think I keep finding documentation for the older parcel (Version 1 instead of 2) and I'm doing something that's breaking when I try to build. I have a package.json file and a .parcelrc file. I have a src folder that looks like this:

• src
  -- sass
  -- js

And I want files to save the same way in the dist folder. I was code splitting before with Webpack/Grunt where I was able to compile several stylesheets that imported others so that I can enqueue them where needed. For example, I had a stylesheet for the homepage and another for a contact us page etc., and though they both live in the src/sass folder, several css files are compiled from there by site section. I'm trying to re-create this in parcel but when I run npm run build I get:

> @my_theme/[email protected] build
> parcel build src/sass/**/*.scss && parcel build src/js/**/*.js

@parcel/core: Invalid Parcel Config

.parcelrc:2:2
  1 | {
> 2 |   "entryPoints": {
>   |   ^^^^^^^^^^^^^ Possible values: "$schema", "extends", "bundler", "resolvers", "transformers", "validators", "namers", "packagers", "optimizers", "compressors", "reporters", "runtimes", "filePath", "resolveFrom"
  3 |     "main-styles": "./src/sass/main.scss",
  4 |     "archive-styles": "./src/sass/archives/archives.scss",

  47 |   },
> 48 |   "output": {
>    |   ^^^^^^^^ Possible values: "$schema", "extends", "bundler", "resolvers", "transformers", "validators", "namers", "packagers", "optimizers", "compressors", "reporters", "runtimes", "filePath", "resolveFrom"
  49 |     "dir": "./dist",
  50 |     "publicUrl": "/",

But if I try and build a specific set by specifying the file name, it works? What am I doing wrong? Here are the scripts in package.json. I did not add a "main" field/file since I don't need it.

"scripts": {
    "clear": "sudo rm -r .parcel-cache",
    "watch": "parcel watch src/sass/**/*.scss",
    "build": "parcel build src/sass/**/*.scss && parcel build src/js/**/*.js",
    "build-styles": "parcel build src/sass/**/*.scss",
    "style-archives": "parcel build src/sass/archives/archives.scss",
    "style-bookstore": "parcel build src/sass/bookstore/bookstore.scss",
    "build-scripts": "parcel build src/js/**/*.js"
  },

And what I have in .parcelrc (shortened for example):

{
  "extends": "@parcel/config-default",
  "entryPoints": {
    "main-styles": "./src/sass/main.scss",
    "archive-styles": "./src/sass/archives/archives.scss",
    "bookstore-styles": "./src/sass/bookstore/bookstore.scss"
  },
  "output": {
    "dir": "./dist",
    "publicUrl": "/",
    "entryFileNames": "js/[name].bundle.js",
    "assetFileNames": "css/[name].css"
  }
}

So style-archives/style-bookstore will work but not build-styles, why?

[RachelRVasquez]

Ok so I've given up on using "globs" for my build script and instead doing this the long and messy way. The only thing that I want is to set the src Sass and the src JS files to compile into two separate directories within the dist folder, so Sass files would be in dist/css whereas JS files would end up in dist/js. I keep finding bits and pieces in documentation but not the exact example I need. The only hints I have are setting something in targets and/or publicUrl? For now I've deleted the .parcelrc file since it was being ignored anyway, and changed my package.json script to look like this (shortened for example):

"build-styles": "parcel build src/sass/archives/archives.scss && parcel build src/sass/bookstore/bookstore.scss && parcel build ./src/sass/committees/committees.scss && parcel build ./src/sass/events/events.scss && parcel build ./src/sass/membership/membership.scss && parcel build ./src/sass/opinions/opinions.scss",

I haven't even included JS files yet and so far, all Sass files are saving as CSS files in dist rather than dist/css which is what I'm trying to avoid. 😩 I was hoping that converting to Parcel would be "easier" but turns out, there's a lot more "config" than advertised and I can't seem to set up the config the way I want it. 😞

[RachelRVasquez]

Closing this so I can create a specific discussion about multiple folders in the dist folder.