用于将样式包装为脚本的FIS插件
- 将样式包装为脚本,主要用于Mod异步加载样式
- 也可以用于同步加载样式,但是没有实际意义,容易造成页面闪动问题
$ npm install -g fis-prepackager-csswrapper
$ vi path/to/project/fis-conf.js
//file : path/to/project/fis-conf.js
fis.config.set('modules.prepackager', 'csswrapper');
fis.config.get('roadmap.path').unshift({
//仅匹配xxx.async.css文件
reg: /(.*)\.async\.css/i,
//模块化文件,可以使用Mod进行异步加载
isMod: true,
//开启csswrapper包装器
extras : {
wrapcss : true
}
});
/* modules/main.css */
body {
color : #999;
}
define('modules/main.css', function(require, exports, module){
function importStyle(css, id) {
var ele = document.createElement('style');
ele.id = id;
document.getElementsByTagName('head')[0].appendChild(ele);
if (ele.styleSheet) {
ele.styleSheet.cssText = css;
} else {
ele.appendChild(document.createTextNode(css));
}
};
importStyle("body {\r\n color : #999;\r\n}", "modules/main.css");
});
//自执行
require("modules/main.css")
!function() {
try {
function importStyle(css, id) {
var ele = document.createElement('style');
ele.id = id;
document.getElementsByTagName('head')[0].appendChild(ele);
if (ele.styleSheet) {
ele.styleSheet.cssText = css;
} else {
ele.appendChild(document.createTextNode(css));
}
};
importStyle("body {\r\n color : #999;\r\n}", "modules/main.css");
} catch(e) {}
}();