如何在 reactjs 应用程序中包含引导 css 和 js？

Question

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

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

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

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

原文由 Mehul Mali 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您是 React 新手并使用 create-react-app cli setup，请运行下面的 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 作为目标元素的属性（react 使用 className 作为属性而不是 class ）。

原文由 Praveen M P 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

通过 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';

原文由 blamb 发布，翻译遵循 CC BY-SA 4.0 许可协议