gatsbyjs - как использовать bootstrap 4 с gatsbyjs 2

Question

Я новичок в gatsbyjs.Следовал всем урокам и начал работать с шаблоном Saasland для создания сайта с gatsbyjs.Я установил бутстрап с npm.Шаблон имеет следующие зависимости от поставщика:

<!-- 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">

В gatsby Я использую тип начальной загрузки https://www.npmjs.com/package/typography-theme-bootstrap, как показано ниже:

import Typography from "typography"
import bootstrapTheme from 'typography-theme-bootstrap'

const typography = new Typography(bootstrapTheme)

export default typography

Это прекрасно работает.Теперь, когда я пытаюсь использовать, например, nav из шаблона, как показано ниже, я получаю ошибки в веб-пакете для конкретных классов начальной загрузки.

<nav class="navbar navbar-expand-lg menu_one menu_four">

Я скопировал и вставил специфичные для шаблона CSS в layout.module.css.

Итак, Как мне использовать bootstrap с gatsbyjs?Как использовать зависимости от других поставщиков от шаблона до gatsbyjs?Должен ли я импортировать bootstrap.min.css в layout.module.css поверх шаблонных классов CSS?

Answer 1

Вот как я заставил Bootstrap работать с Гэтсби.

npm install bootstrap@3.3.7 [Я хотел использовать bootstrap 3]

На странице, которую вы хотите загрузить Bootstrap, импортируйте ее следующим образом

import 'bootstrap/dist/css/bootstrap.css';
if (typeof window !== 'undefined') {
    window.jQuery = window.$ = require('jquery');
    require('bootstrap');
}