yeoman 构建 compass bootstrap scss 图像路径总是前缀 '../'答案

【问题标题】：yeoman build the compass bootstrap scss images path always prefix '../'yeoman 构建 compass bootstrap scss 图像路径总是前缀 '../'
【发布时间】：2013-07-25 00:32:07
【问题描述】：

问题出在bootstrap sass，图标精灵路径是图像前的所有方式前缀'../'，

'../../images/../images/glyphicons-halflings-white.png'

我希望喜欢这个“../images/../images/glyphicons-halflings-white.png”

grunt 文件配置：

  options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/styles',
    imagesDir: 'images',
    javascriptsDir: '<%= yeoman.app %>/scripts',
    fontsDir: '<%= yeoman.app %>/styles/fonts',
    importPath: '<%= yeoman.app %>/components',
    relativeAssets: true
  },

如何配置 grunt 文件以删除前缀。

【问题讨论】：

标签： gruntjs yeoman

【解决方案1】：

这里是指南针任务的默认配置：https://github.com/yeoman/generator-webapp/blob/master/app/templates/Gruntfile.js#L157

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

也许尝试与此同步，看看它是否会自行解决。

【讨论】：

【解决方案2】：

Yeoman, Grunt and Compass sprites 为我工作：

    // The next line tells compass where to put the sprites
    // and the HTTP path to them.
    raw: 'http_images_path = "/images/"\ngenerated_images_dir = ".tmp/images"\nhttp_generated_images_path = "/images/"',
    // This doesn't work with relative paths.
    relativeAssets: false

【讨论】：