Improve docs with includes list

[franz-josef-kaiser]

The maybe toughest thing to get your head around when using TWBS is finding out which files are needed to be included when one wants to use a component. I have just (again) gone through all the hoops with the migration of a build that originally started with v0.4.0-alpha.2 and is now on v0.4.0-beta. Files disappeared, additional ones were necessary and it took me three hours of just finding out what's missing and what changed.
FYI: This is not a "include CSS and JS from CDN and call it a day"–site, but one that includes only what's actually in use (by @importing SCSS files, etc.).

Feature request for documentation: Please, add the files needed (SCSS, JS) that make a component work.

[Johann-S]

I think it's good idea 👍

[andresgalante]

If this can be automated, it'd be awesome!

[XhmikosR]

We could add a new data file with each Javascript component and its dependencies.

[ohcibi]

Almost a year with no activity so far. Any updates on this? Foundation had this ages ago. Its a freakin pain to create a custom bootstrap build for the reasons @franz-josef-kaiser describes.

[wolfy1339]

Well, you could start by linking the same file names together, since they are the name of the component.

[antoHuman]

Trying to work on importing the bare minimum of files required for a few components, I found out that this information are entirely missing from the documentation, while the suggested approach.

The closed issue #28219 had a good suggestion, even if it is now outdated.

My suggestion for the current documentation is to add this information on the #css portion of each component documentation.

I am considering contributing on this. I have experience with using bootstrap but not with contributing, so if you could help me point in the right direction for this specific issue I would really appreciate it.

How is partial import done currently? Do you need to proceed with trial and error until you see the components as they are supposed to look? Is this because the components' styles were not really imagined to be independent?
Is there any issues with doing this automatically? Does this need to be done manually?

I also had a look at bootstrap-npm-starter and specifically this starter.scss file, that is not complete in its information about requirements. I was in fact looking at a way to import the modal and the btn-close style was missing.

I am also adding what I learned for now:

Component imports required for the modal

@import "~/node_modules/bootstrap/scss/close";
@import "~/node_modules/bootstrap/scss/transitions";
@import "~/node_modules/bootstrap/scss/modal";

[mdo]

Thinking something like this might be easiest to keep up to date? Uses our scss-docs shortcode and some comments in the respective Sass file. That way no matter where you are, you know what needs to be used. I suppose this would also get easier in some respects with @use and @forward, if we decided to include all dependencies in each component stylesheet, but I've no idea if that's our course.

[antoHuman]

Sorry, I am not familar with the scss-docs shortcode you are referring to. Is it the formatting for the docs? In any case, I think comments on the files would already be very helpful by themselves. In fact, I often go and look at each file to figure out the dependencies.