我有一个包含 6 个 View 的项目 (html)。这些 View 中的每一个都有一个相应的 View 模型 (.js) 和一个仅适用于该 View 的样式表 (.css)
aurelia-cli 在免费递归我的文件并将所有 .js 和 .css 文件捆绑到几个文件中做得非常出色，这样它们就可以在减少页面加载时间和大小的同时被引用。因此，如果我有一个包含 welcome.html、welcome.js 和 welcome.css 的欢迎文件夹，我可以使用以下命令加载 welcome.html 的 CSS <require from="./welcome.css"></require> CSS 将被注入(inject)到 <head></head> 中页面加载时的标签。
问题 是当我导航到下一个 View 时，来自 welcome.html/welcome.css 的 CSS 规则仍在 <head> 内。网页的标签因此仍然被强制执行。在我的应用程序中访问了所有 6 个 View 后，我现在有 6 个 <style> <head> 内的标签标记所有六个页面的所有规则在我访问的每个页面上都被强制执行，并且在刷新页面之前不会发生卸载。不用说，在访问了几页之后，整个网站就变成了乱七八糟的垃圾。
所以我的问题是
- 为什么这是一个功能
- 我是否缺少最佳实践？
- 现在有没有一种方法可以在访问时加载页面的 css，在离开时卸载它，然后在原处加载新页面的 css？
如果我有一个 10 页的应用程序，其中包含全局样式表、bootstrap、动画 css 和超棒的字体，那么在一天结束时，我会将 14 种相互冲突的样式永久注入(inject)到 html 中，而应用程序的其余部分也会注入(inject)到 html 中。
有什么建议吗？
最佳答案
在面对类似的情况，经过长时间的试验后，我得出了一个简单的结论:我不喜欢这种“到处注入(inject) CSS 文件”的方法。请允许我吐槽一下。 :)
它有什么好处？
- 我们已经创建了一个包含常用内容(bootstrap、font-awesome 等)的组合式全局样式表。据推测，它位于
index.html的头部部分.当然，因为我们希望在应用程序自行加载之前有一个漂亮的启动画面。 Even in the official skeleton-navigation app - 避免
<require>的另一个原因是它的异步性质，这让我们很少(或没有)控制 CSS load order .它非常适合 JS 模块/自定义元素，但不适用于多个 CSS 文件。 - 最后，还有这些其他的
<require>标签放置在每个 View 中，只是为了让我们已经“简单”的情况更加“简单”。
那么，以明确的顺序将其余的应用样式表打包到这个已经存在的全局样式表中不是更容易吗？
我的建议
Aurelia-cli 有一个很棒的功能，叫做 generators .您可以根据需要扩展其功能。 考虑到这一点，您可以为自定义 CSS 预处理/后处理创建新任务，并将它们插入到构建过程中。
- 您可以完全控制整个过程。
- 将创建 1 个缩小文件。它将按照预期的 CSS 加载顺序包含所有内容。
- 小型应用程序的 CSS 文件大小约为 10-30KB，对吧？不会痛的。 :)
几天前我创建了一个小项目，它也解决了这个问题:aurelia-custom-skeleton .工作演示 here .
- 在构建过程中，它创建了一个
base.css来自全局部门，以及一个app.css来自自定义 CSS 文件。这是为了调试目的。 - 这两个文件合并成
styles.min.css，在index.html中部署和引用. - 如果您需要创建一个真正可自行执行的应用程序，无需外部文件，您仍然可以嵌入这 1 个组合样式表。
关于javascript - 使用 Aurelia-CLI 进行 CSS 管理 : Every view loads another CSS file to be enforced site wide causing conflicts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39355900/