bootstrap 图标的 Grunt 构建设置正确路径

Question

所以我一直在尝试使用 yeoman、g运行t、browserify 和 sass bootstrap（带指南针）在工作中构建一个 webapp。我对完成的 dist CSS 没有指向正确的路径有问题，所以我的字形图标没有显示。

这是我遇到的错误：

http://localhost:9000/styles/.tmp/bower_components/sass-bootstrap/fonts/glyphicons-halflings-regular.woff 加载资源失败：服务器响应状态为 404（未找到）

出于某种原因，它正在寻找 /styles/.tmp/ 下的图标，而它实际上应该直接在 bower_components 下寻找图标，例如：

http://localhost:9000/bower_components/sass-bootstrap/fonts/glyphicons-halflings-regular.woff

这不会在 i 运行 g运行t 服务时发生，而只会在 i 运行 g运行t serve:dist 时发生。

我的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;

我的Gruntfile.js罗盘部分：

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
            }
        }
    }

我的 Gruntfile.js cssmin 部分：

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

我不太确定我在这里做错了什么，但我在图像方面遇到了同样的问题，正如您从我的 scss 文件中的 .bannerBackground 中看到的那样，我更改了 url 到 image-url 解决了这个问题。但是我似乎无法对 $icon-font-path 做同样的事情，我怀疑这是问题所在。

Answer 1

好吧，我在这里没有得到任何回应，但是为了帮助其他可能有这个问题的人，我通过这样做解决了这个问题：

使用 "image-url" 帮助功能，而不仅仅是 "url"

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

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

.bannerPattern {
  background-image: image-url("../images/HB_pattern.png");
  background-repeat: no-repeat;
  background-position: top right;
  width: 100%;
  height: 100%;

bootstrap 图标的 Grunt 构建设置正确路径

Grunt build setting correct path for bootstrap icons

browserify

gruntjs

yeoman

compass