1

我正在使用 jQuery-ui datepicker，但图像和路径有问题。这就是我链接我的CSS的方式：

    {% stylesheets  '@BackendBundle/Resources/public/css/bootstrap.min.css' 
                    '@BackendBundle/Resources/public/css/bootstrap-responsive.min.css' 
                    '@HotelBundle/Resources/public/css/ui-lightness/jquery-ui-1.8.20.custom.css' 
                    '@HotelBundle/Resources/public/css/encargado.css'
               output='css/encargado.css' %}
        <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
    {% endstylesheets %}
{% endblock %}

{% block javascripts %}
    {% javascripts  '@BackendBundle/Resources/public/js/jquery-1.7.2.min.js' 
                    '@BackendBundle/Resources/public/js/modernizr-2.5.3-respond-1.1.0.min.js' 
                    '@HotelBundle/Resources/public/js/jquery-ui-1.8.20.custom.min.js' 
                    output='js/backend.js' %}
        <script src="{{ asset_url }}" type="text/javascript"></script>
    {% endjavascripts %}

我将我的文件 css 文件保存在那里：

../src/Gitek/HotelBundle/Resources/public/css/ui-lightness/
 - jquery-ui-1.8.20.custom.css
 - images/ui-bg_diagonals-thick_18_b81900_40x40.png;ui-bg_diagonals-thick_20_666666_40x40.png ...

我的js文件在那里：

../src/Gitek/HotelBundle/Resources/public/js/jquery-ui-1.8.20.custom.min.css

之后，我用 php app/consoleassetic:dump 转储资产，没有错误

我还使用 php app/console assets 安装资产：install web --symlink

并清除缓存 php app/console cache:clear

我做了所有这些，我可以看到并使用我的日期选择器，但有些图片没有加载。如果我转到 Chrome 控制台，我会看到以下错误：

Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-bg_highlight-soft_100_eeeeee_1x100.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-bg_gloss-wave_35_f6a828_500x100.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-bg_glass_100_f6f6f6_1x400.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-icons_ffffff_256x240.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-bg_highlight-soft_75_ffe45c_1x100.png

我认为问题可能出在css文件中的路径上，但我不确定。

有什么帮助吗？

4

4 回答 4

1

1) 在 config.yml 中启用 cssrewrite 过滤器：

assetic:
    filters:
        cssrewrite: ~

2) 使用相对 URL 和 cssrewrite 过滤器列出 css 文件，例如

{% stylesheets '/bundles/backend/css/bootstrap.min.css' 
               '/bundles/backend/css/bootstrap-responsive.min.css' 
               '/bundles/hotel/css/ui-lightness/jquery-ui-1.8.20.custom.css' 
               '/bundles/hotel/css/encargado.css'
               output='css/encargado.css' filter='cssrewrite' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}

过滤器应该正确地重写所有 CSS URL。

于 2012-08-02T21:07:57.207 回答
0

您需要手动更新jquery-ui-1.8.20.custom.min.css文件中图像的路径。

例如：_

.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }

您需要通过images/更新/css/ui-lightness/images/。

于 2012-05-16T09:36:21.630 回答
0

不要修改外部插件。

只需像这样覆盖css：

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: #e6e6e6!important;
}

.ui-widget-header {
    background: #ccc!important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    background: #dadada!important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
.ui-widget-content {
    background: #fff!important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
   background: #fbf9ee!important;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
    background: #fef1ec!important;
}

将此 css 添加到您的 css 文件中。它将消除此类错误。

于 2014-08-27T14:20:56.533 回答
0

您需要使用 cssrewrite 过滤器 + 加载图像来加载 css。

{% block stylesheets %}
  {% stylesheets 'bundles/testbundle/css/jquery-ui/jquery-ui.css' filter='cssrewrite' %}
     <link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
  {% endstylesheets %}
  {% image '@TestBundle/Resources/public/css/jquery-ui/images/*' %}{% endimage %}
{% endblock %}

比安装和转储资产。

于 2015-01-08T15:56:23.233 回答