React-Bootstrap和/或Bootstrap与Webpack的结合

Question

我很难理解如何在React和Webpack构建中使用Bootstrap。我想使用Bootstrap的网格布局和各种功能（似乎react-bootstrap提供了所有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;

- Detuned

Answer 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，但显然更好。

- Kunal