在React / Redux开发过程中,安装bootstrap的正确方法是什么?

时间:2017-04-01 18:31:29

标签: twitter-bootstrap reactjs npm webpack

我可以{"access_token":"501a3d087db7532d4e4350402f9a5da332d71dfc","expires_in":3600,"token_type":"Bearer","scope":null} ,但它位于npm install --save bootstrap

一种方法是下载zip文件并从中拉出所需的文件,但它并不觉得你使用的是npm / webpack的标准方法。那么标准的做法是什么?

1 个答案:

答案 0 :(得分:1)

您需要安装一些依赖项来配置反应中的Bootstrap

首先安装以下loadersdependencies

npm install react react-dom bootstrap babel-preset-react --save

npm install webpack css-loader style-loader file-loader url-loader babel-core babel-loader babel-preset-es2015 --save-dev

现在在您的webpack中,您需要配置这些加载器

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      { 
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
      },
      { 
        test: /\.png$/, 
        loader: "url-loader?limit=100000" 
      },
      { 
        test: /\.jpg$/, 
        loader: "file-loader" 
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
        loader: 'url?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
        loader: 'url?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
        loader: 'file'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
        loader: 'url?limit=10000&mimetype=image/svg+xml'
      }
    ]
  },
};

在此之后,您需要在输入文件中导入Bootstrap css,例如index.js,如

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