Should global css be put in each component or the root component (webpack entry file)?

I am wondering that if I have an external CSS file which is frequently used in my components, should I import this external CSS inside each component or the root component?

For each component:

import React from 'react'
import '../font.css'

class MyComponent extends React.Component {
  render() {
    return <div className="fa fa-bandcamp"></div>;
  }
}

This is self-explanatory: because I want to use 'fa fa-bandcamp', I import '../font.css'.

This methodology is just like programming JS or any other programming languages. If we need a dependency, we import it in that file as well, for example:

import global from 'global'
import util from 'util'

global.foo
global.bar
util.bar
util.bar
// ...

However, my colleague told me that global css should never be imported inside every depending components, instead, it should be imported inside a root component or in the entry file of webpack, for example:

// in each component
import React from 'react'
// import '../font.css'

class MyComponent extends React.Component {
  render() {
    return <div className="fa fa-bandcamp"></div>;
  }
}

// in entry file (root component)
import React from 'react'
import '../font.css'

class App extends React.Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}

What's the pros and cons of each solution? I would like to hear more advices and appreciate your help.