Migrating bootstrap 5.2.2 to a new module system

[take5v]

Hi,

I'd like to switch to Dart sass with its @use and @forward rules. I saw a discussion thread in bt saying that bt will hopefully switch to dart sass at v6.

I'm trying to migrate bootsrap 5.2.2 scss to the latest Dart sass using migrator tool (1.7.1 compiled with dart2js 2.18.0). For this, I copied scss folder locally to my project and run sass-migrator --migrate-deps module --forward=all bootstrap/bootstrap.scss. But I get 1 Warning and 1 Error:

WARNING on line 61, column 54 of bootstrap\_functions.scss: get-function call may require $module parameter
   ╷
61 │     $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
   │                                                      ^^^^^
   ╵
Error: This function was loaded from a nested import of bootstrap\_functions.scss. The module system only supports loading nested CSS using the load-css() mixin, which doesn't load functions.
   ╷
79 │ $blue-100: tint-color($blue, 80%) !default;
   │            ^^^^^^^^^^^^^^^^^^^^^^
   ╵
  bootstrap\_variables.scss 79:12  root stylesheet
Migration failed!

I'm not quite sure if I can simply run sass-migrator to switch from @import to @use and @forward. I'm not a big expert of sass but such a migration looks like not a big deal. I really hope this can be done. What should I do to make such conversion?

[jathak]

In general, you should not try to migrate third-party code to the module system, particularly large libraries like Bootstrap that will require some manual migration beyond what the migrator is capable of (in this case, the Bootstrap maintainers would need to manually refactor the nested import before migrating, and would likely need to update the get-function call to be module-system-aware after running the migrator).

While certain aspects of the module system migration are easier if you wait for all your dependencies to migrate, you can still @use code that is still using @import and migrate your code before Bootstrap migrates.