Tilde imports with the dart sass CLI

Question

I'm upgrading an old system with many of these:

@import "~bootstrap/scss/mixins";

That fails when compiling with the dart-sass CLI.

I used to use node-sass, and packages like node-sass-tilde-importer and node-sass-package-importer to help with that syntax. They don't seem to work for dart-sass.

Given that I'm now using the dart sass CLI, how do I deal with this?

Answer 1

The solution is simple, but unfortunately does not support the tilde syntax.

The scss file should have this:

@import "foo/bar";            // <--- must remove tilde

And the cli syntax is:

sass --load-path=path/to/node_modules SomeFile.scss SomeFile.css

For completeness, the obvious other solution is:

@import "../../../node_modules/foo/bar";

Answer 2

Dart Sass CLI? I think there is no way to import like this in Dart Sass. You have to do it manually.

But there is a Sass migrator to fix legacy sass code, give it a try :

https://sass-lang.com/documentation/cli/migrator

If you are using it with module bundlers, this might help:

How to import sass using tilde prefix with webpack, sass-loader and dart sass