Blueprint: CSS not applying properly

[havesomeleeway]

Environment

• __Package version(s)__:

  "dependencies": {
    "@blueprintjs/core": "^3.11.0",
}

• __Browser and OS versions__:
  OSX, Chrome
  

  Question

I have a create-react-app with the following lines of code in my index.html under /public

index.html

    <link href="../node_modules/normalize.css/normalize.css" rel="stylesheet" />
    <link href="../node_modules/@blueprintjs/core/lib/css/blueprint.css" rel="stylesheet" />
    <link href="../node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css" rel="stylesheet" />

---

Then, within my components folder:

NavBar.jsx

    import React from "react";
    import {Button, Navbar} from "@blueprintjs/core";
    import {Alignment} from "@blueprintjs/core/lib/cjs/common/alignment";

    const NavBar = () => {
        return (
            <Navbar>
                <Navbar.Group align={Alignment.LEFT}>
                    <Navbar.Heading>
                        Company
                    </Navbar.Heading>
                    <Button className="bp3-minimal" icon="home" text="Home" />
                    <Button className="bp3-minimal" icon="document" text="Files" />
                </Navbar.Group>
            </Navbar>

        );
};

    export default NavBar

---

Lastly, within my App.js

App.js

import React from 'react';
import NavBar from "./common/NavBar";

const App = () => {
    return (
        <NavBar/>
    );
};


export default App;

---

However, the CSS styles are not applied to my <NavBar/>. I have a feeling that I am missing something blindingly obvious but I can't seem to figure it out for now.

[havesomeleeway]

Fixed

Importing these 3 into my index.js seems to have fixed the issue. I am now getting a header with proper CSS on my UI.

__index.js__

import "normalize.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";

ReactDOM.render(
    <App />,

    document.querySelector('#root')
);

As a result, I removed the similar lines of code from my index.html

__removed__

    <link href="../node_modules/normalize.css/normalize.css" rel="stylesheet" />
    <link href="../node_modules/@blueprintjs/core/lib/css/blueprint.css" rel="stylesheet" />
    <link href="../node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css" rel="stylesheet" />

Leaving this issue open for now, because I don't know if what I'm doing is the right way to do it or if it's just some hacky way. Advice much appreciated!

[giladgray]

@havesomeleeway yep you fixed yourself the correct way. create-react-app supports importing css files from javascript.

[danielluc]

Would be nice to include this information on the documentation page under Quick Start, this just took me a while to figure out and create-react-app is frequently used.