Question

我一直在调整Gatsby，到目前为止，它为静态网站提供了无缝功能。我在哪里需要使用bootstrap设计布局的堆栈，就布局而言，bootstrap可以很好地工作，但是对于诸如下拉列表轮播或模式的其他支持，我必须使用bootstrap.js及其依赖项，尽管在本地环境中一切正常，但是当我在netlify部署我的网站时遇到了这个问题

4:25:02 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
4:25:01 PM:   7 | //# sourceMappingURL=bootstrap.min.js.map
4:25:01 PM: 
4:25:01 PM:   WebpackError: TypeError: Cannot set property 'emulateTransitionEnd' of undefin  ed
4:25:01 PM:   
4:25:01 PM:   - bootstrap.min.js:6 
4:25:01 PM:     [lib]/[bootstrap]/dist/js/bootstrap.min.js:6:2564
4:25:01 PM:   
4:25:01 PM:   - bootstrap.min.js:6 ./node_modules/bootstrap/dist/js/bootstrap.min.js
4:25:02 PM: Shutting down logging, 58 messages pending

在正式回购和Google上进一步研究了此问题之后，大多数人都建议使用react-bootstrap或reactstrap，但是我非常依赖bootstrapjs，无法找到正确的解决上述错误的方法，无论如何还是最好的方法包括bootstrap js？这是我的package.json文件。

"dependencies": {
    "bootstrap": "^4.3.1",
    "gatsby": "^2.8.2",
    "gatsby-image": "^2.1.2",
    "gatsby-plugin-manifest": "^2.1.1",
    "gatsby-plugin-offline": "^2.1.1",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-react-svg": "^2.1.1",
    "gatsby-plugin-sass": "^2.0.11",
    "gatsby-plugin-sharp": "^2.1.3",
    "gatsby-source-filesystem": "^2.0.38",
    "gatsby-transformer-sharp": "^2.1.21",
    "jquery": "^3.4.1",
    "node-sass": "^4.12.0",
    "popper.js": "^1.15.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1"
  },
  "devDependencies": {
    "prettier": "^1.17.1"
  },

先谢谢您！

Answer 1

[几乎与接受的答案类似。]

使用gatsby添加Bootstrap和相关依赖项的另一种方法是将它们添加到gatsby-browser.js中，如下所示：

步骤1：运行npm i bootstrap jquery popper.js

步骤2：在gatsby-browser.js中添加以下导入

import "bootstrap/dist/css/bootstrap.min.css";
import "jquery/dist/jquery.min.js";
import "popper.js/dist/popper.min";
import "bootstrap/dist/js/bootstrap.min.js";

注意：：如果gatsby-browser.js已经存在并且包含ES5代码，则需要先将其转换为ES6

Answer 2

确定通过在+=中添加我的引导程序依赖项来解决此问题

这是我添加的方式

gatsby-browser.js

import './src/sass/app.scss' import 'jquery/dist/jquery.min.js' import 'popper.js/dist/popper.min' import 'bootstrap/dist/js/bootstrap.min.js'是引导组件连同我的自定义样式一起导入的文件。

或者，您可以使用react-bootstrap删除不必要的jQuery依赖以进行引导，但是可以使用引导样式来设置其自己的组件的样式。

Answer 3

使用react-bootstrap

第 1 步：

npm install react-bootstrap bootstrap

第 2 步：在 gatsby-browser.js

中加载您的引导程序

import "bootstrap/dist/css/bootstrap.min.css";

如果您没有 gatsby-browser.js，请在您的根文件夹中创建 gatsby-browser.js 并添加上述代码段

此外，我必须重新启动我的服务器才能在 gatsby 开发服务器中反映出来

参考： https://react-bootstrap.github.io/getting-started/introduction/

如何在Gatsby网站中添加bootstrap js

3 个答案: