Sco*_*ark 7 javascript aurelia aurelia-binding aurelia-cli aurelia-bundling
我有一个包含6个视图(html)的项目.每个视图都有一个对应的视图模型(.js)和一个仅适用于该视图的样式表(.css)
aurelia-cli可以很好地通过我的文件递归递归并将所有.js和.css文件捆绑到几个文件中,以便在减少页面加载时间和大小的同时引用它们.因此,如果我有一个带welcome.html,welcome.js和welcome.css的欢迎文件夹,我可以使用以下内容加载welcome.html的CSS,<require from="./welcome.css"></require>并<head></head>在页面加载时将CSS注入到标记中.
问题是当我导航到下一个视图时,来自welcome.html/welcome.css的CSS规则仍然在<head>网页的标记内,因此仍然被强制执行.在我的应用程序中访问了所有6个视图后,我现在在<style>标记中有6个标记<head>,所有六个页面中的所有规则都在我去的每个页面上强制执行,直到刷新页面为止没有卸载.毋庸置疑,在访问了几页后,整个网站变得混乱垃圾.
所以我的问题是
如果我有一个10页的应用程序,其中包含全局样式表,bootstrap,动画css和字体真棒,那么在一天结束时,我会将14个冲突的样式永久注入到html中,其余的应用程序将被注入.
有什么建议？
在面对类似的情况并进行了长时间的实验后，我得出了一个简单的结论：我不喜欢这种“到处注入 CSS 文件”的方法。请允许我稍微吐槽一下。:)
它有什么好处呢？
index.html。当然，因为我们希望在应用程序自行加载之前有一个漂亮的启动屏幕。即使在官方的骨架导航应用程序中<require>是它的异步特性，这让我们很少（或没有）控制CSS 加载顺序。它非常适合 JS 模块/自定义元素，但不适用于多个 CSS 文件。<require>每个视图中都放置了这些其他标签，只是为了使我们已经“简单”的情况变得更加“直接”。那么，以明确的顺序将应用程序样式表的其余部分打包到这个已经存在的全局样式表中不是更容易吗？
我的建议
Aurelia-cli 有一个很棒的功能，称为生成器。您可以根据需要扩展其功能。考虑到这一点，您可以为自定义 CSS 预处理/后处理创建新任务，并将它们插入到构建过程中。
几天前我创建了一个小项目，它也解决了这个问题：aurelia-custom-sculpture。工作演示在这里。
base.css根据全局 deps 和app.css自定义 CSS 文件创建一个。这是出于调试目的。styles.min.css，在 中部署和引用index.html。| 归档时间： |
|
| 查看次数： |
1178 次 |
| 最近记录： |