1

我正在使用Backbone Boilerplate并添加了 bower Ratchet 2.* 依赖项，然后我将它从它的 bower origin 文件夹导入到我的 styles/index.css 文件中：

@import "../../vendor/bower/ratchet/dist/css/ratchet.css";

这会正确抓取文件，但由于某种原因，在压缩它时会更改我的 @font-face 选择器中的 url。

原始选择器如下所示：

@font-face {
  font-family: Ratchicons;
  font-style: normal;
  font-weight: normal;
  src: url("app/fonts/ratchicons.eot");
  src: url("app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"), 
       url("app/fonts/ratchicons.woff") format("woff"), 
       url("app/fonts/ratchicons.ttf") format("truetype"), 
       url("app/fonts/ratchicons.svg#svgFontName") format("svg");

运行 grunt 任务后，我为此选择器优化的新 style.css 如下所示：

@font-face {
    font-family: Ratchicons; font-style: normal; font-weight: normal; 
    src: url("/app/img/vendor/bower/ratchet/dist/css/app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"), 
         url("app/fonts/ratchicons.woff") format("woff"), 
         url("app/fonts/ratchicons.ttf") format("truetype"), 
         url("app/fonts/ratchicons.svg#svgFontName") format("svg");
}

（此处添加了换行符以供显示）

您会注意到整个第一行：

src: url("app/fonts/ratchicons.eot");

已被完全剥离，下一行应该是：

src: url("app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"),

但已经变成：

src: url("/app/img/vendor/bower/ratchet/dist/css/app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"),

我无法理解或解释为什么会发生这种情况，但我需要解决它。

我检查了我的 gruntfile 的样式部分，它看起来像这样：

styles: {
  // Out the concatenated contents of the following styles into the below
  // development file path.
  "dist/styles.css": {
    // Point this to where your `index.css` file is location.
    src: "app/styles/index.css",

    // The relative path to use for the @imports.
    paths: ["app/styles"],

    // Rewrite image paths during release to be relative to the `img`
    // directory.
    forceRelative: "/app/img/"
  }
},

我假设由于某种原因，样式优化器正在将 forceRelative url 添加到 ../fonts/ fontfile的原始 url，但我无法解释为什么或做什么。

帮助表示赞赏。

4

0 回答 0