Component utilizing global styles
Global styles are specific to this component only, such as col-lg-2, col-md-4 -> global style
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { BrowserRouter } from 'react-router-dom'
import App from './containers/App'
import './basestyle/flexboxgrid.min.css' //Global style
ReactDOM.render(
<AppContainer>
<BrowserRouter>
<App/>
</BrowserRouter>
</AppContainer>,
document.getElementById('root')
);
Component in need of styles
import React from 'react'
import { Link } from 'react-router-dom'
import styles from './Header.css'
import icon from './icon.png'
const Header = () => (
<div className="row">
<div className={`col-lg-2 col-md-4 ${styles.test}`} > //These styles are not accessible here
<Link to="/categories">
<div className={styles.logoBox}>
<img src={icon} alt="logo"/>
<h1>White Cat</h1>
</div>
</Link>
</div>
</div>
);
export default Header;
Webpack.config https://github.com/minaev-git/TestQuestion