构建应用程序时约曼厂商图片路径不正确(Yeoman vendor images paths are

2019-09-01 02:06发布

我正在与约曼的AngularJS应用。

该应用程序依赖jQuery UI的,它安装与鲍尔。 这是我包括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);
}

任何推荐的解决方案?

Answer 1:

我有同样的问题。 但是,而不是改变jQuery的CSS(这可能会损害未来的更新...),我只是调整了“imagemin”任务繁重的脚本(Gruntfile.js),从而使图像复制他们有望在哪里。 这只要咕噜负责在精缩CSS修改图像pathes的为任何第三方库真。

下面是我所做的更改(请注意,我的jQuery UI的主题文件夹位于下app\styles文件夹)

之前:

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

希望这可以帮助 !



文章来源: Yeoman vendor images paths are incorrect when building the application