Question

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

例如，我已经尝试了以下正常的bootstrap方法以及react-bootstrap的组件，但它们似乎不起作用。另外，你会如何建议使用css reset来规范化一切？提前感谢您的帮助。

  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;

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所做的事情，但显然更好。

使用Webpack进行React-Bootstrap和/或Bootstrap

1 个答案: