gatsbyjs-如何在gatsbyjs 2中使用bootstrap 4

时间:2019-01-16 10:09:15

标签: webpack ecmascript-6 gatsby

我是FreeLibrary的新手。遵循了所有教程,并开始使用Saasland模板使用gatsbyjs创建网站。我已经用npm安装了bootstrap。该模板具有以下特定于供应商的依赖性:

gatsbyjs

<!-- 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"> 中,我使用的是bootstraptheme https://www.npmjs.com/package/typography-theme-bootstrap版式,如下所示:

gatsby

这很好。现在,当我尝试使用如下模板中的import Typography from "typography" import bootstrapTheme from 'typography-theme-bootstrap' const typography = new Typography(bootstrapTheme) export default typography 时,如下所示,我在webpack中遇到了针对引导程序特定类的错误。

nav

我已将模板特定的CSS复制并粘贴到<nav class="navbar navbar-expand-lg menu_one menu_four"> 中。

因此,如何将layout.module.cssbootstrap一起使用?如何使用从模板到gatsbyjs的其他特定于供应商的依赖关系?我应该将gatsbyjs导入模板特定的CSS类顶部的bootstrap.min.css中吗?

3 个答案:

答案 0 :(得分:1)

这就是我让Bootstrap与Gatsby一起工作的方式。

npm install bootstrap@3.3.7 [我想使用引导程序3]

在要加载Bootstrap的页面中,以以下方式导入

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

答案 1 :(得分:0)

当我尝试使用它时,出现以下错误:

编译失败 ./src/pages/home.js 找不到模块:错误:无法解析“ / home / equidev / public_html / dr / equisphere / src / pages”中的“ jquery” 该错误在构建期间发生,无法消除。

答案 2 :(得分:0)

您可以做的是使用npm install bootstrap添加 Bootstrap 依赖项。然后,在应用程序的根目录下创建一个gatsby-browser.js文件。最后,使用import 'bootstrap/dist/css/bootstrap.min.css';

导入Bootstrap