关于环境的一些信息：我们使用Grunt进行UI构建自动化，我们使用Twitter Bower管理第三方依赖项，因为我们不想将第三方代码保存在我们的存储库中，我们使用Compass进行CSS扩展。
目前正在将供应商资产的压缩版本制作成单个CSS文件，并遇到了一个问题，即Compass在构建时无法将图像转换为内联图像。我们希望所有图像都能以Data URL的形式内联到结果CSS文件中（只要我们支持比IE9更新的浏览器=）。
包括Bootstrap SASS的主SCSS文件如下：
所以，主要的愿望是让所有
目前正在将供应商资产的压缩版本制作成单个CSS文件，并遇到了一个问题，即Compass在构建时无法将图像转换为内联图像。我们希望所有图像都能以Data URL的形式内联到结果CSS文件中（只要我们支持比IE9更新的浏览器=）。
包括Bootstrap SASS的主SCSS文件如下：
// styles/main.scss
$iconSpritePath: '../components/bootstrap-sass/img/glyphicons-halflings.png';
$iconWhiteSpritePath: '../components/bootstrap-sass/img/glyphicons-halflings-white.png';
//..
@import "../components/bootstrap-sass/lib/bootstrap";
Compass 命令看起来像
compass compile --css-dir target/compass/styles \
--sass-dir app/styles --images-dir app/images --output-style expanded
生成的输出类似于
// target/compass/styles/main.css
/* line 18, ../../../app/components/bootstrap-sass/lib/_sprites.scss */
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
...
/* WANT THIS IMAGE INLINED */
background-image: url("../components/bootstrap-sass/img/glyphicons-halflings.png");
...
}
所以，主要的愿望是让所有
url()表达式都能够内联地持有base64编码的图像。作为替代方案，如果LESS更容易提供这种功能，我们可以转向使用它。实际上，这是一件好事，因为我们将消除对Ruby/Compass的依赖，并且我们将能够使用NPM安装所有内容。