如何将Bootstrap npm包与React一起使用

How to use Bootstrap npm package with React

本文关键字：React 一起 包与 npm Bootstrap      更新时间：2024-04-09

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

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;

我是新手。有人能告诉我这里缺了什么吗？我做错了什么？

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

这似乎是Meteor的已知问题。所以我想，在千年发展目标找到解决方案之前，我将不得不依赖其他选择。

从node_modules 导入样式文件

相关文章：