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"
}
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?
