如何在React中使用Bootstrap npm软件包

Question

我有一个在前端使用react的流星应用程序。 我已经使用npm安装了bootstrap（而不是atmospherejs），但是在我的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;

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

Answer 1

我假设您要导入Bootstrap的CSS以在组件中使用适当的类。 这可以通过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";

Answer 2

这似乎是流星的已知问题。 因此，我猜我将不得不依靠替代方法，直到MDG找到解决方案。

从node_modules导入样式文件