Question

关于环境：我们使用Grunt进行UI构建自动化，我们使用Twitter Bower来管理第三方依赖项，因为我们不想保留第三方代码我们的存储库，我们使用Compass进行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命令看起来像

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安装所有东西

Answer 1

试试这个

inline-image($image, $mime-type)

http://compass-style.org/reference/compass/helpers/inline-data/#inline-image

http://blog.derekperez.com/post/755676493/smarter-sprites-inline-image-function-with-sass

Multiple Background Images using Sass / Compass

Answer 2

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

使用Compass内联Bootstrap SASS图像

2 个答案: