Bootstrap: Include import statements in all SCSS files.

[JoshMcCullough]

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.

[chrisbo]

With no disrespect to the Bootstrap team, I agree with you that the dependencies and order are as clear as mud.

[XhmikosR]

/CC @MartijnCuppens @mdo

[MartijnCuppens]

There are some variables in the variables file that rely on functions defined in _functions.scss but I think it would be possible to ditch them.

We 'll need to find a solution for things like this though:
https://github.com/twbs/bootstrap/blob/091aa1e9fd411440c3ff3c95042a5aa1502e6978/scss/_variables.scss#L199-L200

[JoshMcCullough]

I'm not suggesting they be removed. All that needs to happen is that each file should include the imports it needs. I should be able to compile _variables.scss on its own, because it should import what it needs from the other SCSS files. I suggest leaving _everything else_ untouched, just add imports.

Let me know if I'm overlooking something here and there's a reason it's this way!

[MartijnCuppens]

Hmmm, I get it. Maybe it would make sense to have a Bootstrap "configurtation" file which just import the variables/mixins/functions you need without having to link to them separately?

[JoshMcCullough]

I think that's just skirting around the issue, and more complex. Each file just needs it's own imports.

[MartijnCuppens]

The problem I have with that approach is the variables, functions & mixins would be overridden over and over again. 35 files would import 28 files which will lead to about 35*27=945 useless imports. That feels like a bad idea.

[mdo]

Each file just needs it's own imports.

We've not had them for seven years, I'm unconvinced we need them today. Bootstrap is built with this approach in mind and would be a deviation from our technical approach.

[herbalite]

How about this?

Add a comment near the top of each SASS file which starts with a _ (underscore) that reads something like

/*
 * @depends ... list the file(s) this file depends on
*/

[MartijnCuppens]

Everything depends on _functions.sccs, _variables.sccs and _mixins.sccs like described in our docs:
https://getbootstrap.com/docs/4.3/getting-started/theming/#importing

We might look in reorganising our folder structure (See https://github.com/twbs/bootstrap/issues/28553) so it 'll be clearer what needs to be included.

[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.

[tmorehouse]

What about conditionals, having the imported files check to see if they have been already imported?

// File: _file-name.scss
$imported-file-name: false !default;
@if $imported-file-name = false {
  $imported-file-name: true;

  // Do/define stuff here
}

Just replace file-name in $imported-file-name with the file's name (or similar unique identifier)

This would be placed in the files being imported, and basically work like an "import once".

[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?

[MartijnCuppens]

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

Not for now, AFAIK libsass hasn't implemented the new module system yet.