如何包括引导css和js在reactjs应用程序?

我是ReactJS的新手，我想在我的React应用程序中包括引导

我已经通过npm安装bootstrap -save安装了bootstrap

现在，我想在React应用程序中加载引导CSS和JS。

我正在使用webpack。

webpack.config.js

var config = {
    entry: './src/index',

    output: {
        path: './',
        filename: 'index.js'
    },

    devServer: {
        inline: true,
        port: 8080,
        historyApiFallback: true,
        contentBase:'./src'
    },

    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel',

                query: {
                    presets: ['es2015', 'react']
               }
            }
        ]
    }
};

module. exports = config;

我的问题是“如何从节点模块中包含引导CSS和JS在ReactJS应用程序中?”如何设置引导包括在我的React应用程序?

当前回答

下面是我用npm的bootstrap 4所做的工作

安装jquery, popper.js, bootstrap包 NPM安装jquery popper.js bootstrap—save 使用以下导入更新index.js 导入“引导/ dist / css / bootstrap.min.css”; 导入“引导/ dist / js / bootstrap.js”;

此外，如果您使用sass自定义样式，您可以安装sass包

npm install sass --save

2021-03-23 10:59:51

其他回答

你可以直接通过

$ npm install --save react react-dom
$ npm install --save react-bootstrap

然后从bootstrap导入你真正需要的东西，比如:

import Button from 'react-bootstrap/lib/Button';

/ /或

import  Button  from 'react-bootstrap';

你还可以安装:

npm install --save reactstrap@next react react-dom

点击这里查看。

关于CSS，你也可以仔细阅读这个链接

在这里阅读

2018-04-04 09:05:35

这里是如何包括最新的引导 https://react-bootstrap.github.io/getting-started/introduction

1.安装

NPM安装react-bootstrap

然后导入到App.js 导入“引导/ dist / css / bootstrap.min.css”; 然后你需要导入你在应用程序中使用的组件，例如如果你使用导航条，导航，按钮，表单，表单控件，然后导入所有这些如下所示:

import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import Form from 'react-bootstrap/Form'
import FormControl from 'react-bootstrap/FormControl'
import Button from 'react-bootstrap/Button'


// or less ideally
import { Button } from 'react-bootstrap';

2020-02-22 23:36:41

通过npm，你会运行以下程序

npm install bootstrap jquery --save
npm install css-loader style-loader --save-dev

如果bootstrap为4，也添加依赖项popper.js

npm install popper.js --save

将以下内容(作为一个新对象)添加到webpack配置中

loaders: [
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }

将以下内容添加到索引或布局中

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

2018-02-27 22:21:22

简单解决方案(2020)如下:-

保存jquery popper.js NPM install -save bootstrap 样式加载器css-loader 更新webpack.config.js，你必须告诉webpack如何处理引导CSS文件，因此你必须添加一些规则，如所示

在你的React应用程序的入口点(通常是index.js)添加一些导入，把它们放在顶部，确保你没有改变顺序。

导入“bootstrap/dist/css/bootstrap.min.css”;

从jquery中导入$;

import Popper from " Popper .js";

import "bootstrap/dist/js/bootstrap.bundle.min";

这些步骤应该可以帮助你，如果有什么问题请评论。

2020-08-24 16:28:10

以防万一，如果你可以使用React应用程序推荐使用的yarn，

你可以，

yarn add bootstrap@4.1.1 // this is to add bootstrap with a specific  version

这将把引导程序作为依赖项添加到包中。Json也是。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "4.1.1", // it will add an entry here
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

然后在index.js文件中导入bootstrap。

import 'bootstrap/dist/css/bootstrap.css';

2018-09-24 07:41:29

如何包括引导css和js在reactjs应用程序?

推荐文章

最新文章

标签