Is it possible to add condition for each bootstrap component file include?

[trk]

What I mean ?

If you add variables to "_variables.scss" file like :

$use-navbar: true !default;
$use-navbar-default: true !default;
$use-navbar-inverse: true !default;

and usage inside "_navbar.scss" file should be like :

@if $use-navbar == true {
     // Create navbar css terms.... 
}
@if $use-navbar-default == true {
     // Create default-navbar css terms.... 
}
@if $use-navbar-inverse == true {
     // Create inverse-navbar css terms.... 
}

Bootstrap users can overwrite to default settings by importing custom "_variables.scss" file before importing "_bootstrap.scsss" file like:

// Import Custom Bootstrap Variables
@import "theme/my_custom_bootstrap_variables";
// Import Bootstrap
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap";

And if we don't need extra navbars or other things "Common CSS, Components, JavaScript components" files, we can quickly disable them bye setting options "true < to > false" and we can apply bootstrap updates quickly via bower and other tools.

[cvrebert]

@glebm I presume you'd want this sort of change made upstream (if at all) rather than at the Sass conversion level?

[glebm]

This is not possible even in the latest Sass (3.4.9). Attempting to compile such code results in:

Error: Import directives may not be used within control directives or mixins.

Unfortunately, the only way to exclude the modules is to copy bootstrap.scss and remove the respective @import statements (brittle WRT Bootstrap updates), or use tricks to automatically remove unused CSS (brittle WRT any updates, but more effective).

[thomas-mcdonald]

Is it possible to push the conditionals inside the partials?

[glebm]

Yeah, that would work. 👍

[cvrebert]

Perhaps we should punt this to Bootstrap v4?

[glebm]

Done

[mdo]

Breaking it down by sub-component is interesting, but might be overkill. Could be interesting to explore though.

[abhilashlr]

Looks like this an overkill.
I have the same requirement where only components I need are compiled (am using bower). I replicated the _variables.scss and _bootstrap.scss(renamed this to copy _bootstrap-theme.scss)

You can comment out all unnecessary imports inside your bootstrap-theme leaving out the bower bootstrap folder.

In your app.scss just import bootstrap-theme and your variables copy. Bootstrap-theme will use the components you need and compile it with your variable theming. And updating the bootstrap version will have no impact in your output.