更改 Compass 使用的 HTTP 图像路径答案

【问题标题】：Change HTTP images path used by Compass更改 Compass 使用的 HTTP 图像路径
【发布时间】：2013-09-04 21:37:59
【问题描述】：

我正在使用 Yeoman 和 Compass 来编译引导 SASS 文件。我的 Yeoman 应用程序不在我的 Web 服务器的基本目录中，它在一个名为“ui”的目录中。我得到 404 未找到引导图像，因为当 CSS 文件应该指向 /ui/images 时，它们却指向 /images。我尝试如下修改 Gruntfile 中的指南针选项，但它似乎没有改变生成的 CSS 中的任何内容：

      compass: {
        options: {
            sassDir: '<%= yeoman.app %>/styles',
            cssDir: '.tmp/styles',
            imagesDir: '<%= yeoman.app %>/images',
            javascriptsDir: '<%= yeoman.app %>/scripts',
            fontsDir: '<%= yeoman.app %>/styles/fonts',
            importPath: '<%= yeoman.app %>/bower_components',
            httpImagesPath: '/ui/images',
            httpGeneratedImagesPath: '/ui/images/generated',
            relativeAssets: false
        },
        dist: {},
        server: {
            options: {
                debugInfo: true
            }
        }
    },

如果我将 relativeAssets 设置为 true 或 false，这似乎没有什么不同。感谢您的帮助！

【问题讨论】：

标签： compass-sass gruntjs yeoman

【解决方案1】：

如果你的 Yeoman 应用是由generator-webapp 生成并包含 bootstrap 2.x.x，你可以在 app/styles/main.scss 中看到以下代码。

  $iconSpritePath: "../images/glyphicons-halflings.png";
  $iconWhiteSpritePath: "../images/glyphicons-halflings-white.png";

您可以随意修改这些路径。

【讨论】：

太棒了！我让这变得更复杂了。谢谢！