Minified Sass breaks Parcel.js serve - @parcel/transformer-css: Unexpected token AtKeyword("import")

[VictorioMolina]

I am using the following yarn script to compile my sass code:

"scripts": {
    "start": "parcel src/pages/index.html",
    "watch-sass": "sass --watch src/sass/main.scss src/css/styles.css",
    "compile-sass": "sass src/sass/main.scss src/css/styles.comp.css",
    "prefix-css": "postcss --use autoprefixer -b 'last 5 versions' src/css/styles.comp.css -o src/css/styles.prefix.css",
    "minify-css": "sass --style=compressed src/css/styles.prefix.css src/css/styles.min.css",
    "build-css": "npm-run-all compile-sass prefix-css minify-css"
},
"devDependencies": {
    "autoprefixer": "^10.4.11",
    "npm-run-all": "^4.1.5",
    "parcel": "^2.7.0",
    "postcss-cli": "^10.0.0",
    "prettier": "^2.7.1",
    "sass": "^1.54.9"
}

In my html files, I am importing the .min.css stylesheets, which only contains one line of code (as they are minified).

When I try to serve my page using parcel, by using the command

parcel src/pages/index.html

I get the error:

@parcel/transformer-css: Unexpected token AtKeyword("import")

This is how my minified css file looks like:

@import"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700";/*!
 * Bootstrap  v5.2.1 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */@import"../../../../node_modules/bootstrap-icons/font/bootstrap-icons.css";@import"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700";@import"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700";/*...more code in one line...*/

How can I solve this?

Also reported here

[devongovett]

That code seems to parse just fine - Example. Do you have a full reproduction?