动态加载耦合的HTML / CSS文件到DOM中

Question

对于我的项目，我使用require.js作为依赖管理器每个组件通过requirejs文本插件加载它自己的html，并将自己附加到DOM中的正确位置。

最终发生的事情之一是有许多与html内联的样式标签。例如：

<div id="menuComponent">
     .....
</div>

<style>
     #menuComponent {
          .... 
     }
     ....
<style>

这导致css现在不再是外部样式表的一部分，并且在脚本编译时与html中的每个相应组件内联。

1. 将许多<style>代码与代码内联，这被认为是不好的做法吗？

2. 如果是这样，我该如何将样式表移动到集中位置？

Answer 1

仅当<style>属性存在时，在body中包含scoped才有效。

来自HTML5规范：

scoped属性是一个布尔属性。如果设置，则表示样式仅适用于以style元素的父元素为根的子树，而不是整个Document。

在您的情况下，我建议您查看一下require-css：https://github.com/guybedford/require-css

如果需要，它将允许您将CSS包含在单独的文件中。

来自require-css文档：

要将CSS输出到单独的文件，请使用配置：

{
  separateCSS: true,
  modules: [
  {
    name: 'mymodule'
  }
  ]
}