如何在 reactjs 应用程序中包含 bootstrap css 和 js? [英] How to include bootstrap css and js in reactjs app?

问题描述

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

I am newb to reactjs, I want to include bootstrap in my react app

我已经通过 npm install bootstrap --save

现在，想在我的 React 应用程序中加载 bootstrap css 和 js.

Now, want to load bootstrap css and js in my react app.

我正在使用 webpack.

I am using 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 应用程序中包含 bootstrap css 和 js?"如何设置引导程序以包含在我的 React 应用中?

My issue is "how to include bootstrap css and js in reactjs app from node_modules?" How to setup for bootstrap to include in my react app?

推荐答案

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

If you are new to React and using create-react-app cli setup, run the npm command below to include the latest version of bootstrap.

npm install --save bootstrap

或

npm install --save bootstrap@latest

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

Then add the following import statement to index.js file. (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 作为目标元素的属性(react 使用 className 作为属性代替class).

don't forget to use className as attribute on target elements (react uses className as attribute instead of class).

这篇关于如何在 reactjs 应用程序中包含 bootstrap css 和 js?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！