No CSS applied to reactJs components
<p>In  my app.js:</p>

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

<p>It renders the elements but without any CSS. I have tried this in firefox and chrom.When I go to inspect element, there aren't any CSS classes. I don't have any custom CSS either. What could be the reason for plain HTML elements getting rendered without any CSS?</p>

<p>Edit:</p>

<p>As suggested, I added :</p>

<pre><code>import 'grommet/scss/vanilla/index';
</code></pre>

<p>for gommet components in my js file.</p>

<p>and get this error:</p>

<p><a href="http://i.stack.imgur.com/gkTGZ.png" rel="nofollow">gommet scss file import error snapshot</a></p>

<p>Edit:</p>

<pre><code>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
</code></pre>