SASS, multiple CSS files when you have many html pages?

I have been trying a lot this morning, and I have this question:

I have many sass files and many html pages. I know how to write the sass on a single css file. But how can I have different css files for every different html page? I don't know if it makes sense to have a huge css file for everything. And I don't know how to split it. These are my scripts, maybe it kinda helps:

So when I compile sass I have main.scss as my input and style.css as my output. Can I have many inputs and many outputs? And if yes, how? You can also send me the documentation if you have a relevant page! Thanks guys.

    {
  "name": "Hello",
  "version": "1.0.0",
  "description": "Just something",
  "main": "index.js",
  "scripts": {
    "watch:sass": "node-sass sass/main.scss css/style.css -w",
    "devserver": "live-server",
    "start": "npm-run-all --parallel devserver watch:sass",
    "compile:sass": "node-sass sass/main.scss css/style.comp.css",
    "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css",
    "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
    "build:css": "npm-run-all compile:sass  prefix:css compress:css"
  },
  "author": "Barbie",
  "license": "ISC",
  "dependencies": {
    "live-server": "^1.2.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "node-sass": "^6.0.0",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^8.3.1"
  }
}