web-dev-qa-db-fra.com

comment configurer bootstrap 4 scss avec react webpack

je commence un nouveau projet en utilisant reactjs ES6 et webpack

en utilisant starter react-statique-passe-partout la question est de savoir comment puis-je importer bootstrap4 dans le processus de construction?

je ne veux pas utiliser le fichier généré bootstrap.css, je veux plutôt que webpack le crée pour moi afin que je puisse changer ses @variables et appliquer mon thème, etc.

j'ai commencé le projet en clonant un passe-partout

> git clone -o react-static-boilerplate -b master --single-branch \
      https://github.com/kriasoft/react-static-boilerplate.git MyApp
>cd MyApp && npm install

  1. installé bootstrap utilisant npm

    npm install [email protected]

maintenant si j'ai besoin du fichier principal bootstrap dans mon index.js, il se chargera correctement. mais comment puis-je inclure les fichiers sass de bootsrap pour commencer à le personnaliser?

csstwitter-bootstrapreactjswebpack
20
Zalaboza

Tout d'abord, vous devez télécharger le bon chargeur pour scss

Installer sass-loader

npm install sass-loader --save-dev

Ensuite, vous devez configurer votre webpack pour tester tous les fichiers scss afin qu'il puisse le gérer. Voilà comment c'est fait

{test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ]}

Si vous avez une erreur concernant node-sass

Si vous avez une erreur comme ne peut pas résoudre node-sass alors installez

npm i node-sass --save-dev

Maintenant, si vous importez le webpack bootstrap.scss le regroupera pour vous

import "bootstrap/scss/bootstrap.scss"

Comment le personnaliser

Exemple dans votre propre fichier scss

$btn-font-weight:bold;

puis importez le composant que vous souhaitez remplacer ou l'ensemble de bootstrap.scss

@import '~bootstrap/scss/bootstrap.scss';

Dans mon cas, style.scss

$btn-font-weight:bold;
@import '~bootstrap/scss/bootstrap.scss';

main.js

import "bootstrap/scss/bootstrap.scss"
import "./style.scss"

J'espère que cela vous aidera à atteindre votre objectif!

J'ai créé une application de démonstration ici

courir npm install et npm start aller à localhost:8080

26
Jorawar Singh

Il semble que le passe-partout n'utilise pas sass-loader , et ne recherche pas les fichiers .scss.

Alors commencez par installer npm i sass-loader --save

Ensuite, sous la partie chargeurs de la configuration du webpack, vous devez ajouter quelque chose comme ceci:

webpack.config.js

var path = require('path');
var nodeModules = path.resolve(path.join(__dirname, 'node_modules'));
// this is the entire config object
const config = {
    // ...
    loaders: [
        // ...
        {
            test: /\.(css|scss)$/,
            include: [
                path.join(nodeModules, 'bootstrap'),
            ],
            loaders: ["style", "css", "sass"]
        }
    ]
    // ...
};

Maintenant, si vous voulez jouer avec les variables .scss De bootstrap, vous pouvez le faire comme ceci:

styles/app.scss

$brand-warning: pink !default;
@import '~bootstrap/scss/bootstrap.scss';

et dans votre main.js mettez dans le style import

import "styles/app.scss";

De plus, je dois mentionner que cela semble très proche de cette réponse

10
Daniel Dubovski

Maintenant que vous êtes passé à react-slingshot avec webpack déjà configuré pour sass, il y a quelques étapes de moins. Depuis le passe-partout brut, ajoutez bootstrap 4 avec npm comme vous l'avez déjà fait:

npm install [email protected] --save

Ensuite, dans src/styles/styles.scss, vous souhaitez ajouter quelques importations

@import "./bootstrap-custom";
@import "~bootstrap/scss/bootstrap";

C'est essentiellement la même chose que @DanielDubovski vous montre mais c'est un peu plus conventionnel d'avoir un fichier séparé de bootstrap redéfinit, et vous n'avez plus besoin de défaut car vous planifiez remplacer les valeurs par défaut de bootstraps et vous ne voudrez probablement pas remplacer accidentellement vos couleurs personnalisées bootstrap. Pour commencer avec src/styles/bootstrap-custom.scss, vous pouvez aller dans node_modules/bootstrap/scss /_variables.scss et consultez la liste complète des variables par défaut. Vous pouvez ensuite copier les noms de variable que vous souhaitez mettre à jour. Voici un exemple de bootstrap-custom.scss qui remplace simplement les couleurs en niveaux de gris:

/*
 * overrides for bootstrap defaults, you can add more here as needed,    see node_modules/bootstrap/scss/_variables.scss for a complete list
 */

 $gray-dark:                 #333;
 $gray:                      #777;
 $gray-light:                #000;
 $gray-lighter:              #bbb;
 $gray-lightest:             #ddd;
9
Ben Sidelinger
npm install --save-dev sass-loader css-loader style-loader node-sass

sur votre webpack.config.js:

 loaders: [
     {
         test: /\.scss$/,
         loaders: [ 'style', 'css', 'sass' ]
     }
 ]
1
Jan Franz Palngipang

Pas le cadre d'origine du PO (mais c'était il y a quelques années). À partir du [email protected] il a maintenant intégré la compilation SCSS. Donc, si vous l'utilisez pour de nouveaux projets, il est assez simple d'importer: https://facebook.github.io/create-react-app/docs/adding-bootstrap

0
martinedwards