全局css应该放在每个组件中还是放在根组件（webpack条目文件）中？

我想知道，如果我有一个经常在我的组件中使用的外部CSS文件，我应该在每个组件或根组件中导入这个外部CSS吗

对于每个组件：

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

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

但是，我的同事告诉我，全局css永远不应该导入到每个依赖的组件中，而是应该导入到根组件中或webpack的条目文件中，例如：

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

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

// 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>;
  }
}

//在每个组件中
从“React”导入React
//导入“../font.css”
类MyComponent扩展了React.Component{
render（）{
返回；
}
}
//在条目文件中（根组件）
从“React”导入React
导入“../font.css”
类应用程序扩展了React.Component{
render（）{
返回{this.props.children}；
}
}

---

每种解决方案的优缺点是什么？我希望听到更多的建议，并感谢您的帮助。

在全局空间中添加css非常简单，而且是开箱即用的

使用webpack，您可以轻松地在每个组件文件中分别导入css文件作为

样式！css！您的
的sass
。如果需要，scss

将导入

它允许您以以下方式简单地导入和使用React组件中的样式：

从“/mycomponent.scss”导入样式

导出默认道具=>

以下是相应的装载机：

样式加载器
css加载器
sass装载机

样式加载器
将在开发期间处理热加载，并在生产构建时绑定输出的样式（这些样式被编译到组件模块中）

我建议对
css加载器使用
modules选项
，以确保css的作用域正确，并且不会与外部代码冲突。
当您的同事说：

全局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...

    /***/
}

开始时查看引导css许可证？但是，它还使用
@import url
作为导入到文件中的字体css

因此，每次导入时，它都会一次又一次地包含在模块代码中

要使用的东西

如果您使用类似的东西，它基本上会扫描代码并将
css
提取到一个文件中，这也有助于并行加载。因此，解决方案您的同一css文件多次导入解决方案

观察：

在我的例子中，我的网页使用了
更少的
样式，因此我的加载程序类似于：

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

网页包v1.13.*：

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

在我的例子中，它不是在
style
标记下添加，而是嵌入到javascript函数中

在您的情况下，您使用的是
样式加载器
，根据定义，它是：

样式加载器-在运行时将JavaScript模块导出的CSS注入到标记中

现在，如果您通过在您的案例中导入相同的
global.css
来验证，将创建一个单个
，这将是一次性定义

显示您的
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中，您会看到bundel.js添加的
标记：

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

结论：


全局导入样式

优点：如果您有基本css，例如
bootstrap.css
和
font-awesome
，这是一种很好的做法，因为要知道，您的整个应用程序都遵守css规则，这要简单得多

缺点：无。如果css是通用的，那么我看不到全局导入它的任何缺点


样式的本地导入

优点：当您想要深入到任何bug时，如果您知道哪个css正在影响组件，那么调试总是容易得多。这些css文件就是您要实现的文件

缺点：如果出现
边框
问题的bug，并且在调试时，您意识到它指向本地导入的css文件，但是您没有意识到它会影响其他组件，那么它将导致UI中不必要的更改。在构建期间提取样式的速度也会慢很多


我会在您使用
font.css的时间和地点导入您的
font.css文件（但不完全是您建议的方式，请参见下文），而不仅仅是在根组件中导入。我建议这样做是因为当您决定进行代码拆分时，您只希望CSS存在于使用它的捆绑包中

如果导入在您的根组件中，您可能会删除所有使用
fa-bandcamp
类的组件，但您的导入仍保留在根中（因为您忘记了它在那里，而不是在您的组件旁边），并且您将绑定在CSS中，而CSS甚至不在使用它的块中

相反，当在组件级别导入时，您也可能会遇到这样的情况：您使用这些类并忘记导入
font.css
，因为另一个组件已经导入了全局css。它看起来很有效，但是如果您对代码进行拆分，您可能会发现您的块没有正确的字体，因为CSS导入位于另一个块中。在这种情况下，在根目录中导入它将解决您的问题

我会做什么：

我认为任何全局css都是不好的，你应该使用它