twitter-bootstrap - 如何在reactjs应用程序中包含bootstrap css和js？

Question

我是 ReactJS 新手，我想在我的 React 应用程序中包含 bootstrap

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

现在，想要在我的 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;

我的问题是“如何从节点模块将 bootstrap CSS 和 JS 包含在 ReactJS 应用程序中？”如何设置 bootstrap 以包含在我的 React 应用程序中？

Answer 1

如果您是 React 新手并且使用 create-react-app cli 设置，请运行下面的 npm 命令以包含最新版本 Bootstrap 。

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 作为目标元素的属性(react 使用 className 作为属性类)。