使用 Compass 内联 Bootstrap SASS 图像答案

【问题标题】：Inlining Bootstrap SASS images with Compass使用 Compass 内联 Bootstrap SASS 图像
【发布时间】：2013-02-19 02:11:10
【问题描述】：

关于环境：我们使用 Grunt 进行 UI 构建自动化，我们确实使用 Twitter Bower 来管理第三方依赖项，因为我们不想将第三方代码保留在我们的存储库中，我们使用 @ 987654323@ 用于 CSS 扩展。

目前正在将供应商资产的压缩版本制作成单个 CSS 文件并遇到了一个问题，即 Compass 在构建时不会以某种方式将图像转换为内联图像。我们希望将所有图像内联到带有数据 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 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 安装所有东西

【问题讨论】：

标签： less compass-sass gruntjs bower bootstrap-sass

【解决方案2】：

刚刚更改了引导 SASS 主文件中基本路径的变量。它有帮助。

【讨论】：