javascript - 如何在 React 中使用 Bootstrap npm 包

Question

我有一个 meteor 应用程序，它在前端使用 React。我已经使用 npm (不是atmospherejs)安装了 bootstrap，但在我的 React 组件中使用 bootstrap 样式时遇到了问题。这是我的主要组件的代码。

import React from 'react';

import Bootstrap from 'bootstrap';

const Layout = ({content = () => null }) => (

  <div>
   <div className="row">
     <div className="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
     <div className="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>      
     <div className="clearfix visible-xs-block"></div>
     <div className="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   </div>
  </div>  
);

export default Layout;

我是新来的 react 。有人可以告诉我这里缺少什么以及我做错了什么吗？

Answer 1

我假设您想要导入 Bootstrap 的 CSS 以在组件中使用适当的类。这个can be done with Webpack :

安装

从 npm 安装加载程序。

npm install style-loader css-loader --save-dev

配置

以下是启用 require() css 的配置示例:

{
    // ...
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
}

使用CSS

// in your modules just require the stylesheet
// This has the side effect that a <style>-tag is added to the DOM.
require("./stylesheet.css");

// or
// import "./stylesheet.css";