javascript - 使用 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 文件作为文本加载后不久，每个元素都以 View 的 ID 为前缀。

一旦 CSS 被添加前缀，样式标签就被创建并放置在 View 中。

现在，这完美地工作了，好吧，它并不漂亮，也没有留下太多的错误余地。但是，我编写此代码是为了帮助演示我的需要。

我需要能够加载具有 View 特定样式表的模板，其中工作表中的样式将只应用于 View 并且只会覆盖全局样式。

上面例子的问题在于它是一个 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