应用于reactJs组件

在我app.js无CSS：应用于reactJs组件

[import React, {PropTypes} from 'react'; 
import { Navbar, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap'; 
const TopHeader = (props) => { 
    return(
    <div> 
     <Navbar color="faded" light> 
     <NavbarBrand href="/">reactstrap</NavbarBrand> 
     <Nav className="pull-xs-right" navbar> 
      <NavItem> 
      <NavLink href="/components/">Components</NavLink> 
      </NavItem> 
      <NavItem> 
      <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink> 
      </NavItem> 
     </Nav> 
     </Navbar> 
    </div> 
); 
}][1]

它呈现的元素，但没有任何CSS。我已经在firefox和chrom中尝试过了。当我去检查元素时，没有任何CSS类。我没有任何自定义CSS。纯HTML元素在没有任何CSS的情况下呈现的原因是什么？

编辑：

至于建议，我说：

import 'grommet/scss/vanilla/index';

为gommet组件在我的js文件。

，并得到这个错误：

gommet scss file import error snapshot

编辑：

ERROR in ./~/css-loader!./~/sass-loader!./~/grommet/scss/vanilla/index.scss 
Module build failed: 
@import "inuit-defaults/settings.defaults"; 
^ 
     File to import not found or unreadable: inuit-defaults/settings.defaults 
Parent style sheet: /home/simran/webocity_POS_react/node_modules/grommet/scss/grommet-core/_settings.scss 
     in /home/simran/webocity_POS_react/node_modules/grommet/scss/grommet-core/_settings.scss (line 2, column 1) 
@ ./~/grommet/scss/vanilla/index.scss 4:14-102 13:2-17:4 14:20-108

来源

2016-09-26 gags

如何将boostrap.css导入到您的项目中？看起来你没有在任何地方加载样式表 – finalfreq

综观Reactstrap的源代码，Reactstrap是抽象的只是薄薄的一层在引导4个元素，可帮助您呈现符合Bootstrap 4类名称和样式的标记。它默认不包含任何CSS。

您必须通过安装Bootstrap 4的npm软件包或使用其CDN托管的CSS自行包含Bootstrap 4 CSS。

如果您使用的WebPack为您的项目，你可以参考我的例子上的版本安装在这个仓库的进口说明：https://github.com/yangshun/react-redux-starter/blob/master/package.json#L46

来源

2016-09-26 15:54:30

这是正确的。我相信它应该明确说明。我和grommet.github.io有完全一样的问题。那里可能会丢失什么？ – gags

这可能是相同的原因。你必须明确地导入项目中的索环的css。如果你提供了一个链接到你的仓库，我可以帮你看看。 –

Hey.Thanks。这里：https://github.com/simran66/webocity – gags

你只使用该库提供了自己，这不是组件为你导入引导CSS库。你需要包含bootstrap 4 CSS样式表。

如果您有一个index.html，您可以将其添加到文档的头部。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">

来源

2016-09-26 15:55:04 finalfreq

@ Thanks.https：//www.npmjs.com/browse/keyword/bootstrap%204哪npm我需要安装bootstrap 4吗？ – gags

如果你使用的是webpack，你可以参考以我的示例要安装的版本和此存储库中的导入方法：https://github.com/yangshun/react-redux-starter/blob/master/package.json#L46 –

应用于reactJs组件

回答

相关问题