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

发布时间：2020-12-15 09:34:11 所属栏目：百科来源：网络整理

导读：我很难理解如何使用React和Webpack构建引导程序.我想使用Bootstrap的网格布局和各种功能(似乎react-bootstrap提供了引导程序的所有功能？)并且想知道设置它的最佳方法是什么. 例如,我尝试了以下正常的bootstrap方法以及react-bootstrap的组件,但它们似乎不起

我很难理解如何使用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;

解决方法

这就是我目前在启动时导入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所做的,但显然更好.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!