Je suis nouveau dans gatsbyjs . J'ai suivi tous les didacticiels et j'ai commencé à travailler avec le modèle Saasland pour créer un site Web avec gatsbyjs . J'ai installé bootstrap avec npm. Le modèle a les dépendances spécifiques au fournisseur suivantes:
<nav class="navbar navbar-expand-lg menu_one menu_four">
Dans gatsby , j'utilise bootstraptheme https://www.npmjs.com/package/typography-theme-bootstrap typographie comme ci-dessous:
import Typography from "typography" import bootstrapTheme from 'typography-theme-bootstrap' const typography = new Typography(bootstrapTheme) export default typography
Cela fonctionne très bien. Maintenant, quand j'essaye d'utiliser, par exemple, nav à partir du modèle qui est comme ci-dessous, j'obtiens des erreurs dans le webpack pour des classes spécifiques de bootstrap.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--icon font css-->
<link rel="stylesheet" href="vendors/themify-icon/themify-icons.css">
<link rel="stylesheet" href="vendors/font-awesome/css/all.css">
<link rel="stylesheet" href="vendors/flaticon/flaticon.css">
<link rel="stylesheet" href="vendors/animation/animate.css">
<link rel="stylesheet" href="vendors/owl-carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="vendors/animation/animate.css">
<link rel="stylesheet" href="vendors/magnify-pop/magnific-popup.css">
<link rel="stylesheet" href="vendors/elagent/style.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
J'ai copié et collé un css spécifique à un modèle dans layout.module.css.
Donc, Comment utiliser bootstrap avec gatsbyjs ? Comment puis-je utiliser d'autres dépendances spécifiques au fournisseur du modèle à gatsbyjs ? Dois-je importer bootstrap.min.css dans layout.module.css en plus des classes CSS spécifiques au modèle?
3 Réponses :
Voici comment j'ai fait fonctionner Bootstrap avec Gatsby.
npm install bootstrap@3.3.7 [Je voulais utiliser bootstrap 3]
Dans la page que vous voulez pour charger Bootstrap, importez-le de la manière suivante
import 'bootstrap/dist/css/bootstrap.css';
if (typeof window !== 'undefined') {
window.jQuery = window.$ = require('jquery');
require('bootstrap');
}
Lorsque j'essaye d'utiliser ceci, je reçois l'erreur suivante:
Échec de la compilation ./src/pages/home.js Module non trouvé: Erreur: Impossible de résoudre 'jquery' dans '/ home / equidev / public_html / dr / equisphere / src / pages' Cette erreur s'est produite lors de la compilation et ne peut pas être ignorée.
Ce que vous pouvez faire est d'ajouter une dépendance Bootstrap avec npm install bootstrap . Ensuite, créez un fichier gatsby-browser.js à la racine de votre application. Enfin, importez Bootstrap avec import 'bootstrap / dist / css / bootstrap.min.css';
github.com/jaxx2104/gatsby-starter-bootstrap
@ksav existe-t-il de toute façon pour éviter d'utiliser un autre paquet? car le package boostrap est déjà installé.
Étant donné que Gatsby utilise React, vous ne pourrez pas utiliser l'attribut "class" - essayez plutôt "className"