我创建了一个这样的模板:
// template.tpl
<div>
<input id="an_input"></input>
</div>
和一些 CSS:
// stylesheet.css
input {
background: #000000;
}
最后这是一个精简的模块:
define([
'jquery',
'text!template.tpl',
'text!styleshet.css'
], function($, html, css){
var view = $('#sample_div');
view.append($(html));
var regex = /^([^\s\}])/gm;
var styles = css.replace(regex, '#'+view.attr('id')+' $1');
var style = $('<style>\n'+styles+'\n</style>');
view.prepend(style);
});
本质上发生的事情是,模板正在加载并放入 #sample_div
。在 CSS 文件作为文本加载后不久,每个元素都以 View 的 ID 为前缀。
一旦 CSS 被添加前缀,样式标签就被创建并放置在 View 中。
现在,这完美地工作了,好吧,它并不漂亮,也没有留下太多的错误余地。但是,我编写此代码是为了帮助演示我的需要。
我需要能够加载具有 View 特定样式表的模板,其中工作表中的样式将只应用于 View 并且只会覆盖全局样式。
上面例子的问题在于它是一个 hack,一个针对 CSS 的正则表达式,以及一个新样式标签的构建,这不是我想要的方式。我一直在研究 javascript CSS 解析器以获得更简洁的解决方案,尽管 JSCSSP 引起了我的注意,但它将许多函数放入了全局命名空间,而 jquery.parsecss 似乎只适用于文档中已有的样式。
有人对我想要实现的目标有任何经验吗?
最佳答案
大多数加载器都有 CSS 插件来为您处理插入:
RequireJS CSS 插件 https://github.com/tyt2y3/requirejs-css-plugin
CurlJS CSS 插件与主要发行版捆绑在一起: https://github.com/cujojs/curl/tree/master/dist
关于javascript - 使用 RequireJS 模块化 CSS 样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14956014/