如何在ReactJS应用程序中包含Bootstrap CSS和JS？

Question

我是reactjs的新手，我想在我的react应用程序中包含引导程序

我已经安装了引导程序 npm install bootstrap --save

现在，要在我的react应用程序中加载bootstrap 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;

我的问题是“如何在node_modules的reactjs应用程序中包含引导CSS和js？” 如何设置引导程序以包含在我的React应用程序中？

Answer 1

如果您不熟悉React并使用 create-react-app cli设置，请运行以下 npm 命令以包含最新版本的引导程序。

npm install --save bootstrap

要么

npm install --save bootstrap@latest

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

）

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

要么

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

不要忘记 className 在目标元素上用作属性（反应 className 用作属性而不是 class ）。