Should global css be hosted in each component or root component (webpack login file)?

Question

I am wondering if I have an external CSS file that is often used in my components, should I import this external CSS inside each component or 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-evident: because I want to use "fa fa-bandcamp", I import "../font.css".

This methodology is similar to JS programming or any other programming language. If we need a dependency, we also import it into this file, 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 each component, but it should be imported inside the root component or into the webpack login file, 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>;
  }
}

? .

Answer 1

font.css, ( , , . ), . , , , CSS , .

, , fa fa-bandcamp, ( , ), CSS, , .

, , font.css, ANOTHER CSS. , , , , , CSS . !

:

, css , - CSS-. <Text/>, :

import React from 'react'
import '../font.css'
export default ({ className, children, tagName: TagName }) => <TagName className={`fa fa-bandcamp ${className}`>{ children }</TagName>;

<Text tagName="span">Hey!</Text> , :

• CSS .
• <Text/>, , CSS , .
• CSS.
• , .

​​ - reset.css. .

TL; DR

. . , CSS , .

- . , , , CSS.

"" - . , fa , . Modular. . Robust.

Answer 2

css .

webpack css , , style!css!sass .scss, .

React : import styles from './mycomponent.scss';

export default props => <button className={styles.mycomponent.button} />

: style-loader css-loader sass-loader

style-loader ( ) .

modules option css-loader, , CSS .

Answer 3

, :

css , webpack

css , , , less, javascript, bundle.js , Snippet:

, /* 1381 */
/***/
function(module, exports, __webpack_require__) {

    eval("exports = module.exports = __webpack_require__(625)();\n// imports\nexports.push([
module.id, \"@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);\", \"\"]);
\n\n// module\nexports.push([module.id, \"/*!\\n * Bootstrap v3.3.7 (http://getbootstrap.com)\\n * 
Copyright 2011-2016 Twitter, Inc.\\n * Licensed under MIT 
(https://github.com/twbs/bootstrap/blob/master/LICENSE)\\n */\\n/*! normalize.css v3.0.3 | MIT License |
 github.com/necolas/normalize.css */\\nhtml 
{\\n  font-family: sans-serif;\\n  -ms-text-size-adjust: 100%;
\\n  -webkit-text-size-adjust: 100%;\\n}\\nbody 
{\\n  margin: 0;\\n}\\narticle,\\naside,\\ndetails,\\nfigcaption,
\\nfigure,\\nfooter,\\nheader,\\nhgroup,\\nmain,\\nmenu,\\nnav,\\nsection,
\\nsummary {\\n  display: block;\\n}\\naudio,\\ncanvas,\\nprogress,
\\nvideo {\\n  display: inline-block;\\n  vertical-align: baseline;\\n}
\\naudio:not([controls]) 
{\\n  display: none;\\n  height: 0;\\n}\\n[hidden],\\ntemplate {\\n  display: none;\\n}\\na {\\n  background-color: transparent;\\n}

   Some more things here...

    /***/
}

bootstrap css ? @import url css, .

, , .

- Webpcak, css , . css .

webpack less, , , - - :

Webpack v1.13. *:

  {
     test: /\.less$/,
     loader: 'style!css!less'
  }

style, javascript.

style-loader, :

style-loader - CSS, JavaScript,

, , global.css , <style>, .

bundle.js, :

/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

exports = module.exports = __webpack_require__(3)(undefined);
// imports


// module
exports.push([module.i, ".red {\n  color: red;\n}\n\n.blue {\n  color: blue;\n}\n", ""]);

// exports


/***/ }),

index.html <style>, bundel.js:

function insertStyleElement (options, style) {
   ....
}

• : , CSS, bootstrap.css font-awesome, , css.

  : . , css ,

• . , , css , . css - , .

  cons: , border, , css, , , , . , .