Limiter le champ d'application du bootstrap styles

Depuis le résultat de la modification de moins/bootstrap.moins n'était pas assez bien pour moi (voir pourquoi en bas de post), j'ai fini par filtrage de bootstrap.css :

var css = require('css'), fs = require('fs');

var prefix = '.bootstrap-scope';
var inFile = 'bootstrap.css';

var cssAst = css.parse(fs.readFileSync(inFile, 'utf8'));
prefixNode(cssAst);
console.log(css.stringify(cssAst));

function prefixSelector(sel){
    if (sel.match(/^@/)) return sel;
    var m = sel.match(/(^| )(body|html)($|\W.*)/i);
    if (m) 
        return m[1] + prefix + m[3];
    else
        return prefix + ' ' + sel;
}

function prefixNode(node) {
    if (node.selectors) {
        node.selectors = node.selectors.map(prefixSelector);
    } else if (node.stylesheet) {
        node.stylesheet.rules.forEach(prefixNode);
    } else if (node.rules) {
        node.rules.forEach(prefixNode);
    }
}

Depuis bootstrap.css est généré, on peut aussi le faire à l'aveuglette (solution similaire à Alexey, mais aussi de la manipulation de quelques cas de coin):

perl -lpe 'BEGIN { $prefix = ".bootstrap-scope" } if (($indent, $s, $sep) = /^(\s*)([^@\s].*?)(\s*[,{])$/) { $s =~ /^(from|to)*$/or $s =~ s/(^| )(body|html)($|\W.*)/$1$prefix$3/i or $s = "$prefix $s"; $_ = "$indent$s$sep" }' bootstrap.css

Comme pour la modification de moins/bootstrap.css et de l'appel de grunt pour générer dist/css/bootstrap.css (Andrew Homeyer de la solution), il ne semble pas travailler proprement (dans le bootstrap 3 au moins) pour certains cas:

• divers mixin comme .faire-grille-colonnes (de less/mixins.xml) finissent mal de préfixe. Exemple:

  .bootstrap-scope .col-sm-1,
    .col-sm-2,
    .col-sm-3,

• l'utilisation de "&", au MOINS est limitée:

  .caret {
    .btn-default & {

  devient

   .btn-default .bootstrap-scope .caret {

  au lieu de ce que nous voulons:

   .bootstrap-scope .btn-default .caret {

Si vous avez la structure suivante:

• mystyles.moins
• mystyles.css
• /bootstrap/
  • bootstrap.moins
  • bootstrap.css
  • de la grille.moins
  • ...
  • /mixin/

Et que vous souhaitez limiter le champ d'application de bootstrap, vous devez mettre dans votre mystyles.moins (droit chemin):

.your-class-to-limit-bootstrap-scope{
    @import (less) "bootstrap/bootstrap.css";
}

Nous avons pour importer le fichier de bootstrap.fichier css au lieu de bootstrap.moins, mais à l'aide de la (moins) @import option afin de traiter le fichier en tant que Moins de fichiers, quelle que soit l'extension de fichier. Ainsi, vous obtiendrez la bonne css, par exemple:

.your-class-to-limit-bootstrap-scope .col-xs-1,
.your-class-to-limit-bootstrap-scope  .col-sm-1,
.your-class-to-limit-bootstrap-scope ...
.your-class-to-limit-bootstrap-scope .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: 7px;
    padding-right: 7px;
 }

Mais si vous importez des fichiers d'amorce moins de fichiers, vous obtiendrez une manière incorrecte css délimités (de manière erronée):

.your-class-to-limit-bootstrap-scope{
    @import "bootstrap/bootstrap.less";
}

Ainsi, vous obtiendrez la mauvaise étendue css, par exemple:

.your-class-to-limit-bootstrap-scope .col-xs-1, 
.col-sm-1,
.col-md-1,
...
.col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

pas besoin de fourche/modifier l'original de bootstrap.
Juste envelopper de ses importations dans votre fichier comme ceci (sass dans mon cas):
J'ai créé le fichier "bootstrap-portée-limites.scss" (que j'ai d'importation où j'ai besoin de bootstrap):

.bootstrap-inside {
  @import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/_theme.scss";
}

avis important!

veuillez garder à l'esprit que bootstrap a certains styles de carrosserie qui ne serait pas appliquée lors de l'utilisation d'une telle approche. Mais il vous donne une capacité de contrôle de bootstrap avec JS par l'ajout du "bootstrap à l'intérieur" de la classe de l'élément pour activer ou désactiver le bootstrap pour l'ensemble de la page si certains contenu dynamique a utiliser bootstrap ou pas.

une autre préoccupation que vous devriez connaître: certains plugins qui remplacent bootstrap styles peuvent avoir des problèmes depuis bootstrap styles avec une nouvelle classe wrapper devenir plus fort (plus spécifique) et ne peut être remplacée par déballé plugins.

---

pour webpack cas je vous recommande d'utiliser ce chargeur: https://www.npmjs.com/package/wrap-css-loader pour envelopper l'ensemble, que vous pouvez utiliser comme une partie de votre application (div?) plus tard

La seule chose que je sais de qui est certainement pire que ce script est de bootstrap lui-même, mais c'est probablement encore va être la meilleure réponse ici pour un peu de temps:

prefix="#bs431"; cat bootstrap.css | while IFS='' read -r line; do if echo "$line" | egrep -i '(\{|,)$' | egrep -iv '\@media' | wc -l | egrep -iq '^0$'; then echo "$line"; else echo "$line" | perl -pe 's/^(\s+)?/\1'"$prefix"' /g' | perl -pe 's/, (\.|#|\[|[a-zA-Z]{1})/, '"$prefix"' \1/g'; fi; done | perl -pe 's/'"$prefix"' :root/'"$prefix"'/g' > bootstrap.scoped.css