如何在 React 中使用 Bootstrap npm 包

Question

我有一个在前端使用 react 的流星应用程序。我已经使用 npm（而不是大气js）安装了引导程序，并且在我的反应组件中使用引导程序样式时遇到了问题。这是我的主要组件的代码。

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;

我是新来的反应。谁能告诉我这里缺少什么以及我做错了什么？

Answer 1

这似乎是 Meteor 的一个已知问题。所以我想在 MDG 找到解决方案之前，我将不得不依赖替代方案。

Style files imports from node_modules

Answer 2

我假设您想要导入 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";