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

<分区>

想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭 7 年前。

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

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

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

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

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

最佳答案

包括<style>在 body 内只有 scoped 才是有效的 HTML5属性存在。

来自 HTML5 规范:

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

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

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

来自 require-css 文档:

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

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

关于javascript - 将耦合的 HTML/CSS 文件动态加载到 DOM 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33091488/