如何包括引导css和js在reactjs应用程序?

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

当前回答

以防万一，如果你可以使用React应用程序推荐使用的yarn，

你可以，

yarn add bootstrap@4.1.1 // this is to add bootstrap with a specific  version

这将把引导程序作为依赖项添加到包中。Json也是。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "4.1.1", // it will add an entry here
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

然后在index.js文件中导入bootstrap。

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

2018-09-24 07:41:29

其他回答

完整的答案是给你jquery和bootstrap，因为jquery是bootstrap.js的要求:

安装jquery和bootstrap到node_modules:

npm install bootstrap
npm install jquery

在你的组件中使用这个确切的文件路径:

import 'jquery/src/jquery'; //for bootstrap.min.js
//bootstrap-theme file for bootstrap 3 only
import 'bootstrap/dist/css/bootstrap-theme.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

2019-03-21 19:48:05

希望这是有帮助的;)

第一步:使用NPM安装以下命令

npm install --save reactstrap@next react react-dom

步骤2:示例index.js主脚本导入bellow命令

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

步骤3:UI组件参考以下网站 reactstrap.github.io

2018-04-23 10:18:41

npm install --save bootstrap

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

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

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

2018-03-09 11:31:19

在你的项目中安装引导程序后“npm install—save bootstrap@3.3.7” 你必须移动到项目SRC文件夹中的index.js文件，并从节点模块包中导入bootstrap。

导入“引导/ dist / css / bootstrap.min.css”;

如果你想从这个视频中得到帮助，它肯定会对你有很大帮助。

在React项目中导入Bootstrap

2018-11-20 07:08:37

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

类似的,

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

webpack配置是这样的，

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

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

2016-10-14 13:21:11

如何包括引导css和js在reactjs应用程序?

推荐文章

最新文章

标签