css中哪些是组件,全局CSS应放在每个组件或根组件（webpack条目文件）中吗？

他们差不多吧，当你的同事说：

，全球的CSS不应该每隔取决于组件内进口，相反，它应根组件内或的WebPack 入境文件导入

为什么？

因为那样的话，你可能最终为内联CSS文件，给一个例子，在我的应用程序，在这里我用less之一，每进口分解成相同内嵌到JavaScript文件的本地副本，生成bundle.js文件我的情况下，段：

, /* 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。

因此，每次导入时，它都会一次又一次地包含在模块代码中。如果你使用类似Extract Text Webpcak Plugin，基本上会扫描你的代码，并提取css到一个文件中，这也有助于在并行负载

观光使用

。因此正在解决你的同样的css文件导入多次解决方案。

观察：

在我的情况我的WebPack使用less造型，因此我的装载机是一样的东西：

的WebPack V1.13 *：

{

test: /\.less$/,

loader: 'style!css!less'

} 在

我的哪些大小写不是在style标签下添加的，而是嵌入在javascript函数中。

在你的情况，您使用的是style-loader其定义是：

风格装载机 - 喷射CSS，即由JavaScript模块导出，为标签在运行时

现在，如果您通过在您的情况下导入相同的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你会看到

function insertStyleElement (options, style) {

....

}

结论：

全球进口的样式

利弊：是的情况下，一个很好的做法，你有基础的CSS像bootstrap.css和font-awesome，因为它是一个很大整洁知道，你的整个应用程序坚持CSS的这一规则。

缺点：无。在情况下，CSS是常见的，然后我看不出它导入全球

当地的风格

利弊进口的任何缺点：它总是会轻松很多的情况下，调试当您想深入了解任何错误时，您知道哪个css会影响组件。这些CSS文件是你将要实现的。

缺点：有极少数的存在，万一有border问题的一个bug，并且在调试时，你意识到它指向本地导入的CSS文件，但你没有意识到，它会影响其他组件，那么它会导致你的用户界面发生不必要的变化。在构建期间，样式也会慢得多。