使用 RequireJS 模块化 CSS 样式表答案

【问题标题】：Modulizing CSS Stylesheets with RequireJS使用 RequireJS 模块化 CSS 样式表
【发布时间】：2013-02-04 01:07:59
【问题描述】：

我已经创建了一个这样的模板：

// 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 解析器以获得更简洁的解决方案，虽然 JCSSSP 引起了我的注意，但它把许多函数放入了全局命名空间，而 jquery.parsecss 似乎只适用于文档中已有的样式。

有人对我想要达到的目标有任何经验吗？

【问题讨论】：

标签： javascript html css templates requirejs

【解决方案1】：

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

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

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

【讨论】：

这不是我遇到问题的插入，我尝试使用 requirejs-css，但是它没有提供将 css 范围限制为特定模板的方法。
@Flosculus 我不明白“将其限制为特定模板”是什么意思。你的意思是你有一些div 的规则，你希望这些规则只适用于 DOM 的一部分——你使用给定模板注入的那部分？如果是这样，我只有两个选择：iframe 或“仅在模块 CSS 中使用类选择器并命名它们，以便它们与模板中的类命名空间匹配”
关于您的第二点，这在技术上就是我现在所做的。我创建了一个设置脚本，在触发所有 JS 编译器以将所有内容都模块化之前运行。我正在使用 SCSS 来协助模块化。看起来没有明确的解决方案，但是如果您想修改答案以扩展您的第二点类选择器，我可以接受。
您也许可以扩展其中一个 css！插件在样式表前面加上一个类名，基于像文件名这样的标准，所以如果你有 lightbox.css，它会以.lightbox 开始文件中的每个规则。这可能是一种有趣的方法。
@Flosculus，我正在研究与您类似的内容：将样式限制为特定视图/模板。我的解决方案是将状态放在 html 元素中，例如：<html state={{ state }}> <div ui-view="page">，然后我可以做<style>[state="user.login"] [ui-view="page"] div#login {/* etc */}。