Question

所以我一直在尝试使用yeoman，grunt，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

当我运行grunt serve时，这不会发生，但只有当我运行grunt 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%;

Grunt构建设置引导程序图标的正确路径

1 个答案: