使用RequireJS模块化CSS样式表

Question

我创建了一个这样的模板:

// 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文件作为文本加载后不久,每个项目都以视图的ID为前缀.

一旦CSS加上前缀,就会创建样式标记并将其放在视图中.

现在,这很好用,好吧它不漂亮,也没有留下太大的误差.但是我写了这段代码来帮助演示我需要的东西.

我需要能够加载具有视图特定样式表的模板,其中工作表中的样式将仅应用于视图,并且仅覆盖全局样式.

上面这个例子的问题在于它是一个hack,一个针对CSS的正则表达式,以及一个新的样式标记的构建,这不是我想要的方式.我一直在研究javascript CSS解析器以获得更清晰的解决方案,虽然JSCSSP引起了我的注意,它将许多函数放入全局命名空间,而jquery.parsecss似乎只适用于文档中已有的样式.

有没有人对我想要实现的目标有任何经验？

Answer 1

大多数加载器都有 CSS 插件来为您处理插入：

RequireJS CSS 插件 https://github.com/tyt2y3/requirejs-css-plugin

CurlJS CSS 插件与主要发行版捆绑在一起： https://github.com/cujojs/curl/tree/master/dist