使用 Webpack 的 React-Bootstrap 和/或 Bootstrap答案

【问题标题】：React-Bootstrap and/or Bootstrap with Webpack使用 Webpack 的 React-Bootstrap 和/或 Bootstrap
【发布时间】：2016-01-26 06:21:30
【问题描述】：

我很难理解如何将引导程序与 React 和 Webpack 构建一起使用。我想使用 Bootstrap 的网格布局和各种功能（似乎 react-bootstrap 提供了 bootstrap 的所有功能？）并且想知道设置它的最佳方法是什么。

例如，我用正常的引导方法以及 react-bootstrap 的组件尝试了以下方法，但它们似乎不起作用。另外，您如何建议使用 css 重置来规范化所有内容？提前感谢您的帮助。

  import React from 'react';
  import mui from 'material-ui';
  import style from './style.scss';
  import Navigation from './Navigation';
  import { Grid, Row, Col } from 'react-bootstrap';

  class App extends React.Component {
    constructor(props) {
      super(props);
    }

    render() {
      return (
        /* normal bootstrap -- doesn't work */
        <div className="container">

          /* react-bootstrap which also doesn't work */
          <Grid>
            <Row className="show-grid">
              <Col md={6} mdPush={6}><code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code></Col>
              <Col md={6} mdPull={6}><code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code></Col>
            </Row>
          </Grid>

          <Navigation />
        </div>
      );
    }
  }

  export default App;

【问题讨论】：

标签： webpack react-bootstrap

【解决方案1】：

这就是我目前在启动时导入 react-bootstrap css 的方式。

在 app.js 中（你会调用 ReactDOM.render）：

// Import the CSS reset, which HtmlWebpackPlugin transfers to the build folder
import 'sanitize.css/lib/sanitize.css';
import '!!style-loader!css-loader!./vendor/bootstrap/css/bootstrap.min.css';

sanitize 和 normaliser 一样，但显然更好。

【讨论】：