Yeoman构建应用程序时，供应商图片路径不正确

Question

Yeoman构建应用程序时，供应商图片路径不正确

7

我正在使用Yeoman开发一个AngularJS应用程序。

这个应用程序依赖于jQuery UI，它是通过Bower安装的。以下是我如何包含jQuery UI主题的：

<!-- build:css styles/plugins.css -->
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.core.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.accordion.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.autocomplete.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.button.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.datepicker.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.dialog.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.menu.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.progressbar.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.resizable.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.selectable.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.slider.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.spinner.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.tabs.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.tooltip.css" />
<link rel="stylesheet" href="components/jquery.ui/themes/base/jquery.ui.theme.css" />
<!-- endbuild -->

当构建应用程序时，一切都很顺利，没有出现错误。

然而，在浏览器控制台（使用Chrome），我可以看到jQuery UI日期选择器所需的图像无法找到，因为它在styles/images/内查找，实际上它们在components/...内。

我的第一个想法是在CSS中覆盖jQuery UI图像路径，但这似乎不是最好的解决方案。例如： 原始样式：

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/;
}

我的重写

.ui-widget-header .ui-state-error {
    background-image: url(../components/jquery.ui/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png);
}

有推荐的解决方案吗？

- ndequeker

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jacob · Accepted Answer

我有同样的问题。但是，与其更改jQuery CSS（这可能会对未来的更新有害...），我只是在grunt脚本（Gruntfile.js）中调整了“imagemin”任务，以便将图像复制到预期位置。只要grunt负责修改最小化css中的图像路径，那么任何第三方库都是如此。

以下是我所做的更改（请注意，我的jQuery UI主题文件夹位于app\styles文件夹下）：

Before :

imagemin : {
    dist : {
        files : [{
                expand : true,
                cwd : '<%= yeoman.app %>/images',
                src : '{,*/}*.{png,jpg,jpeg}',
                dest : '<%= yeoman.dist %>/images'
            }
        ]
    }
}

之后：

imagemin : {
    dist : {
        files : [{
                expand : true,
                cwd : '<%= yeoman.app %>/images',
                src : '{,*/}*.{png,jpg,jpeg}',
                dest : '<%= yeoman.dist %>/images'
            }, {
                expand : true,
                flatten : true,
                cwd : '<%= yeoman.app %>/styles',
                src : '**/*.{png,jpg,jpeg,gif}',
                dest : '<%= yeoman.dist %>/styles/images'
            }
        ]
    }
}

希望这可以帮到你！