Blueprint: Where do I include references to main CSS files from each Blueprint package as suggested by Quick start?

[mdebeus]

Environment

• __Package version(s):
  "dependencies": {
  "@blueprintjs/core": "^3.5.1",
  "@blueprintjs/datetime": "^3.1.0",
  "@blueprintjs/icons": "^3.1.0",
  "@blueprintjs/select": "^3.1.0",
  "react": "^16.5.0",
  "react-dom": "^16.5.0",
  "react-scripts-ts": "2.17.0"

• __Browser and OS versions__:
  Windows 10, Chrome Version 68.0.3440.106 (Official Build) (64-bit)

Question

Your Quick start guide states the following:

Don't forget to include the main CSS file from each Blueprint package!
<!-- in index.html, or however you manage your CSS files -->
<link href="path/to/node_modules/normalize.css/normalize.css" rel="stylesheet" />
<!-- blueprint-icons.css file must be included alongside blueprint.css! -->
<link href="path/to/node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css" rel="stylesheet" />
<link href="path/to/node_modules/@blueprintjs/core/lib/css/blueprint.css" rel="stylesheet" />
<!-- add other blueprint-*.css files here -->

However, React does not allow you to include files that are not inside of public.
From the create-react-app generated index.html file inside of public:

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

Specifically: Only files inside the public folder can be referenced from the HTML'

Can you please suggest an alternative as to where to include the links, so that the styles can be used throughout the application or library without having to include them in each component file.

Additionally, if I want to use the sass or less variables (and override some), where should I include those files as well?

Thank you very much in advance

[giladgray]

@mdebeus if you're using create-react-app then you should be able to simply import the CSS files from the blueprint packages in your index.js file.

import "@blueprintjs/core/lib/css/blueprint.css";

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet

[giladgray]

the sass/less variables files are only useful if you're using a CSS preprocessor, which is the next section in the README link above. create-react-app has stunningly good documentation and guides of its own for common patterns.

[giladgray]

also you can't override the published variables. you can only override if you compile your own version of blueprint.css from the original sass code. i do not recommend this.