How to avoid adding the react-toolbox css separately in index.html file

Question

I'm using react-toolbox in my UI and my build tool is webpack. I have configured webpack to generate a style file - react-toolbox.css - in my dist directory. This file has the definitions for CSS classes that are used by react-toolbox components in my app. In my index.html this CSS file is added as an external link. My app styles(styles that I have writted for non react-toolbox components in my app) is required in my app.js file and get loaded using the less-loader. Currently my app works fine.

• app.js is downloaded to provide the app scripts and app styles
• react-toolbox.css is downloaded to provide styles to the react-toolbox components

I wanted to know if there is a way to merge the contents of react-toolbox.css with my styles and require the resultant css inside app.js, thereby eliminating the need for a separate react-toolbox.css

Answer 1

According to the docs you can

Bundled component

You import from the index file so the imported component comes with all dependencies and themes already required and injected for you. This means that the CSS for each dependency will be bundled in your final CSS automatically and the component markup includes the classnames to be styled. For example:

import { AppBar } from 'react-toolbox/lib/app_bar';

instead of

import { AppBar } from 'react-toolbox/lib/app_bar/AppBar.js';