我是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应用程序?


当前回答

你可以在任何你想要的地方导入css文件。如果你根据需要配置了加载器,Webpack会注意捆绑css。

类似的,

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

webpack配置是这样的,

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

注意:你必须添加字体加载器,否则你会得到错误。

其他回答

你可以在任何你想要的地方导入css文件。如果你根据需要配置了加载器,Webpack会注意捆绑css。

类似的,

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

webpack配置是这样的,

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

注意:你必须添加字体加载器,否则你会得到错误。

如果你是React的新手,并且使用create-react-app命令行设置,运行下面的npm命令来包含最新版本的bootstrap。

npm install --save bootstrap

or

npm install --save bootstrap@latest

然后将以下import语句添加到index.js文件中。(https://getbootstrap.com/docs/4.4/getting-started/webpack/ # importing-compiled-css)

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

or

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

不要忘记在目标元素上使用className作为属性(react使用className作为属性而不是class)。

npm install --save bootstrap 

并将此import语句添加到index.js文件中

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

或者你可以简单地在index.html文件中添加CDN。

因为Bootstrap/Reactstrap已经发布了他们的最新版本,即Bootstrap 4,你可以按照以下步骤使用它

导航到您的项目 打开终端 我假设已经安装了npm,然后输入以下命令 NPM install——save react-dom

这将在您的项目中作为依赖项安装Reactstrap。

下面是使用react创建按钮的代码

import React from import {Button} from 'reactstrap'; 导出默认值(props) => { 回报( <按钮颜色= "危险" >危险!< / >按钮 ); };

你可以通过访问他们的官方页面来检查Reactstrap

某种程度上,公认的答案是只谈论包括css文件从bootstrap。

但是我认为这个问题和这个有关 引导下拉在React中不工作

有几个答案可以帮助你

https://stackoverflow.com/a/52251319/4266842 https://stackoverflow.com/a/54188034/4266842