How to Import external package like bootstrap

[romaluca]

Hi, before esbuild i had bootstrap in node_modules folder and i could import it in app.scss with: @import '~bootstrap/scss/bootstrap';

Now this instruction raise this error: Error: Can't find stylesheet to import. ╷ 2 │ @import '~bootstrap/scss/bootstrap'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ If i change it with: @import '../node_modules/bootstrap/scss/bootstrap'; It works.

It is the right way? Thanks

[mcrumm]

Hi @romaluca! You may prefer to use the --load-path option to simplify/shorten the import paths in your scss files.

For instance, we do the following in our app:

config :dart_sass,
  version: "1.36.0",
  default: [
    args: [
      "--load-path=./node_modules",
      ...
    ],
    cd: Path.expand("../assets", __DIR__)
  ]

Then, we import our UI package (we use Bulma) like so:

@import "bulma/bulma";

Note that we no longer need the tilde ~ – Sass will first look at relative paths and then check the load paths you specify on the command line.

[mcrumm]

To be clear, I think you need to:

1. Add the --load-path to node_modules option on your dart_sass config args
2. Change your import to the following:

@import 'bootstrap/scss/bootstrap';

...and that should be it :)

[romaluca]

Sorry for the late, i just tried and it works! Thanks

[LostKobrakai]

@mcrumm Is there a way to still support the ~? We're using a shared dependency using that notation, so I can't just update the imports.

[mcrumm]

@LostKobrakai It's really a question for the sass CLI. :) We only forward the args. If it's possible to do via the CLI then it should work, otherwise there is nothing we can do.