Include import statements in all SCSS files.

Shouldn’t each SCSS file stand on its own? E.g. if you look at _variables.scss, it references things in _functions.scss, etc. I believe these local imports should be at the top of the file otherwise the consumer needs to import all of the referenced SCSS files in the proper order.

If I am consuming some Bootstrap SCSS, and I need to access the variable $spacer, I would write my SCSS as follows:

@import "~bootstrap/_variables";

.my-class {
  margin-top: $spacer * 2;
}

But this will fail to compile with the message:

argument $color of darken($color, $amount) must be a color

But I’m not doing anything with color here. This is because of the line $link-hover-color: darken($link-color, 15%) !default; in _variables.scss – that line references $link-color which in turn references the theme-color function in _functions.scss.

In order to get my SCSS to compile, I need to dig into _variables.scss and determine which files it needs to import, and then do the same task again for each of those files, and add them all as imports to my SCSS:

@import '~bootstrap/_functions';
@import '~bootstrap/_mixins';
@import '~bootstrap/_variables';

.my-class {
  margin-top: $spacer * 2;
}

IMO, _variables.scss should look like this at the top…

@import '_functions';
@import '_mixins';

…and all of the other SCSS files should import what they need as well. In the end, I should be able to pick any single SCSS file and compile it on its own.

[GauthierPLM]

Now that the module system has been released, is there any plan to support it so we can use @use and @forward?

Is there any known fork that make use of them?

[voltaek]

This issue sounds like it may be best solved by the upcoming module system currently being implemented in SASS, which adds @use and @forward, and will eventually replace @import completely.

For more info, see their initial blog post about it (which uses many examples from Bootstrap’s source), and also their accepted feature proposal in their spec repo.

Note that this would not be an immediate solution, as their current timeline puts the new module system not landing until October 2019, and it would likely be best to not require the newest SASS version in order to build Bootstrap right away - though their plan seems to be for it to land in both Dart Sass and LibSass at the same time, which will help with adoption.