Gruntjs Grunt生成设置引导图标的正确路径

因此，我一直在尝试使用yeoman、grunt、browserify和sass bootstrap（带compass）在工作中构建一个webapp。我对完成的dist CSS没有指向正确的路径有问题，因此我的glyph图标没有显示

这就是我得到的错误：

加载资源失败：服务器响应状态为404（未找到）

出于某种原因，它在/styles/.tmp/下查找图标，而实际上应该直接在bower_组件下查找图标，例如：

当我运行咕噜发球时不会发生这种情况，但仅当我运行咕噜发球时才会发生：dist

My style.scss：

$fa-font-path: 'fonts';
$icon-font-path: "../bower_components/sass-bootstrap/fonts/";
@import '../bower_components/sass-bootstrap/lib/bootstrap';

.bannerBackground {
background-image: url("../images/Header.png");
background-repeat: repeat;
width: 100%;
height: 148px;

My GrunFile.js compass部件：

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

指南针：{
选项：{
sassDir:“/styles”，
cssDir:“.tmp/styles”，
generatedImagesDir:'.tmp/images/generated'，
imagesDir:“/images”，
javascriptsDir:“/js”，
fontsDir:“/styles/fonts”，
导入路径：'/bower_components'，
httpImagesPath:“/images”，
httpGeneratedImagesPath:“/images/generated”，
httpFontsPath:“/styles/fonts”，
相对论：错，
AssetCachBuster:错误
},
地区：{
选项：{
generatedImagesDir:“/images/generated”
}
},
服务器：{
选项：{
debugInfo:true
}
}
}

My Grunfile.js cssmin部分：

cssmin: {
        dist: {
            options: {
                noRebase: true
            },
            files: {
                '<%= yeoman.dist %>/styles/style.css': [
                    '.tmp/styles/{,*/}*.css'
                ]
            }
        }
    }

cssmin:{
地区：{
选项：{
挪威语：对
},
档案：{
“/styles/style.css”：[
“.tmp/styles/{，*/}*.css”
]
}
}
}

---

我不确定我在这里做错了什么，但我在图像方面也遇到了同样的问题，正如您从.bannerBackground中看到的，在我的scss文件中，我将url更改为图像url，从而解决了问题。但是，我似乎无法对$icon font path执行相同的操作，我怀疑这就是问题所在。

好吧，我在这里没有得到任何响应，但为了帮助可能有此问题的其他人，我通过如下操作解决了此问题：

使用“图像url”帮助功能，而不仅仅是“url”

$fa字体路径：“字体”；
$icon字体路径：“../bower_components/sass引导/fonts/”；
@导入“../bower_components/sass bootstrap/lib/bootstrap”；
@导入“BAM摘要”；
@导入“详细信息”；
.横幅背景{
背景图像：图像url（“../images/Header.png”）；
背景重复：重复；
宽度：100%；
高度：148px；
边缘底部：10px；
}
.横幅图案{
背景图片：图片url（“../images/HB_pattern.png”）；
背景重复：无重复；
背景位置：右上角；
宽度：100%；
高度：100%；