Route to stylesheet functions fails w/ Parcel

[nunhes]

pnpm start

> bootstrap-parcel@1.0.0 start C:\laragon\www\bootstrap-parcel
> parcel serve src/index.html --public-url / --dist-dir dist

Server running at http://localhost:1234
� Build failed.

@parcel/transformer-sass: Can't find stylesheet to import.
   ╷
34 │ @import "bootstrap/scss/functions";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\scss\styles.scss 34:9  root stylesheet

  Error: Can't find stylesheet to import.
     ╷
  34 │ @import "bootstrap/scss/functions";
     │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
    src\scss\styles.scss 34:9  root stylesheet
      at Object.wrapException (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\sass@1.69.0\node_modules\sass\sass.dart.js:1252:43)
      at C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\sass@1.69.0\node_modules\sass\sass.dart.js:81769:25
      at _wrapJsFunctionForAsync_closure.$protected (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\sass@1.69.0\node_modules\sass\sass.dart.js:4022:15)
      at _wrapJsFunctionForAsync_closure.call$2 (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\sass@1.69.0\node_modules\sass\sass.dart.js:33876:12)
      at _awaitOnObject_closure.call$1 (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\sass@1.69.0\node_modules\sass\sass.dart.js:33864:32)
      at Object._rootRunUnary (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\sass@1.69.0\node_modules\sass\sass.dart.js:4408:18)
      at StaticClosure.<anonymous> (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\sass@1.69.0\node_modules\sass\sass.dart.js:115492:16)
      at _CustomZone.runUnary$2$2 (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\sass@1.69.0\node_modules\sass\sass.dart.js:35300:39)
      at _Future__propagateToListeners_handleValueCallback.call$0 (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\sass@1.69.0\node_modules\sass\sass.dart.js:34363:51)
      at Object._Future__propagateToListeners (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\sass@1.69.0\node_modules\sass\sass.dart.js:4201:93)

[nunhes]

I followed the lead in the official documentation and still get this error. If you import everything works but not when you want to work with selected style sheets :(

[julien-deramond]

Could you provide more detail regarding your env?
It seems to work pretty well from https://github.com/twbs/examples/tree/main/parcel:

git clone https://github.com/twbs/examples.git
cd examples/parcel/
npm install
npm start

where style.scss loads Bootstrap by selecting Sass files.

[filips123]

I have the same problem. Running the same commands causes this error:

> parcel@0.0.0 start
> parcel serve src/index.html --public-url / --dist-dir dist

Server running at http://localhost:1234
× Build failed.

@parcel/transformer-sass: Can't find stylesheet to import.
   ╷
34 │ @import "bootstrap/scss/functions";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\scss\styles.scss 34:9  root stylesheet

  Error: Can't find stylesheet to import.
     ╷
  34 │ @import "bootstrap/scss/functions";
     │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
    src\scss\styles.scss 34:9  root stylesheet
      at Object.wrapException (C:\Users\filips\AppData\Local\Temp\examples\parcel\node_modules\sass\sass.dart.js:1252:43)
      at C:\Users\filips\AppData\Local\Temp\examples\parcel\node_modules\sass\sass.dart.js:81805:25
      at _wrapJsFunctionForAsync_closure.$protected (C:\Users\filips\AppData\Local\Temp\examples\parcel\node_modules\sass\sass.dart.js:4022:15)
      at _wrapJsFunctionForAsync_closure.call$2 (C:\Users\filips\AppData\Local\Temp\examples\parcel\node_modules\sass\sass.dart.js:33914:12)
      at _awaitOnObject_closure.call$1 (C:\Users\filips\AppData\Local\Temp\examples\parcel\node_modules\sass\sass.dart.js:33902:32)
      at Object._rootRunUnary (C:\Users\filips\AppData\Local\Temp\examples\parcel\node_modules\sass\sass.dart.js:4408:18)
      at StaticClosure.<anonymous> (C:\Users\filips\AppData\Local\Temp\examples\parcel\node_modules\sass\sass.dart.js:115526:16)
      at _CustomZone.runUnary$2$2 (C:\Users\filips\AppData\Local\Temp\examples\parcel\node_modules\sass\sass.dart.js:35338:39)
      at _Future__propagateToListeners_handleValueCallback.call$0 (C:\Users\filips\AppData\Local\Temp\examples\parcel\node_modules\sass\sass.dart.js:34401:51)
      at Object._Future__propagateToListeners (C:\Users\filips\AppData\Local\Temp\examples\parcel\node_modules\sass\sass.dart.js:4201:93)

The same happens with npm run build.

Maybe it is Windows-specific error?

Also, it seems that prefixing filenames with _ fixes the issue (at least for a few files I tried), but this is still unexpected and not documented anywhere.

[simonwickes]

This is still happening today. Fresh download of the examples repo with the exact errors shown above. I get it from MS VS Code in the git terminal. Oddly, the webpack example in the same repo has essentially the same code and works fine. But Parcel is broken as downloaded.
Windows 11 Pro

Ironically I am only trying these builds as Gulp is no longer "worthy" but sure did a great job in making flexible builds. Any suggestions on the build platform I should use for custom CSS, JS and HTML for web use appreciated.

[filips123]

Any suggestions on the build platform I should use for custom CSS, JS and HTML for web use appreciated.

Well, prefixing filenames with _ fixes the import issue in Parcel, so if you want to use Parcel, you can do something like this, at least until this issue is fixed:

@import "bootstrap/scss/_maps";
@import "bootstrap/scss/_mixins";
@import "bootstrap/scss/_utilities";
@import "bootstrap/scss/_root";
@import "bootstrap/scss/_reboot";

// etc.

However, there seems to be another issue with Parcel that may sometimes cause generated CSS from SCSS to be to be duplicated, so I have another normal CSS file with just:

@import "bootstrap.scss";

That imports the above Bootstrap SCSS file with all required Bootstrap imports. And then I import bootstrap.css from all other CSS/SCSS files.

[jeetesh-nariya]

May be parcel dev dependencies can't able to importing bootstrap _files