关于自动引入ui css

[jpssff]

我希望moye在使用时，尽量对开发者透明，自动引入css，即在require某个ui时，将整个css文件也放到页面上（所有ui的style已经合并到一个css文件）。

从引入时机来说，Control被require时，将css加到页面比较合适，但在Control中做这个事情似乎又不雅观，大家觉得如何实现比较好呢？

[jinzhubaofu]

是在require时才引入吗？异步的加载css？

[jpssff]

是在require时才引入吗？异步的加载css？

是的，异步加载css，所有组件合并成一个css文件，在第一个ui没require进来前，加载css文件。

这个想法的原因是在大搜索页面环境上，希望能够按需加载样式，对开发者又透明。有啥好建议吗？

目前大搜索现有组件是单个组件加载自己的样式，对于moye，样式不多，预期css文件也不会大，合并成一个就ok了。

[jinzhubaofu]

异步引用CSS只有一个问题：CSS 先 生效，JS 后 执行

如果顺序反过来就会出现DOM先出现而CSS还没加载完，那样式就会乱掉。

我简单试了一下，大约可以这么搞

require(['test', 'css!./test.css'], function (test) {
   // ...
});

可是，如果moye以后的控件增多了、CSS变很大（比如200K）怎么办呢？

---

另外，提供一个编译好的CSS可能会引起样式名的冲突。比如，覆盖了.ui-tip的默认样式，可能对其他卡片造成影响。

比较安全一种方案应该是在less里importmoye的less，然后还要修改样式的前缀，比如：

@tip-prefix: ecl_xxx_list

当然这样会造成一定程序的代码重复

[jinzhubaofu]

还有一种方案：可以通过编译时解决这个问题。。。

比如编译时发现require(['ui/xxx'])，那么自动添加一个<link>在头部。。。

还是均衡一下利弊吧

[leeight]

开发状态自动引入，虽然有可能出现样式乱掉，应该影响不大。
发布状态自动把css的代码合并到ps的页面或者js里面去？

[jpssff]

多谢各位，最终采用发布时合并组件的css到js文件中。这样就不纠结加载顺序问题了。

即合并后，一个组件代码为：

A.addCssText('组件css文本'); //在ps页面中提供添加css的方法
define();  //组件定义