CSS文件的顺序.在主题CSS之前加载模块的CSS

Question

如何在主题 CSS 之前更改CSS文件的顺序以加载模块的CSS？以下是一些代码示例:

主题的local.xml中添加的主题CSS文件(加载在所有页面上):

<default>
    <reference name="head">
        <action method="addItem">
            <type>skin_css</type>
            <name>css/theme.css</name>
        </action>
    </reference>
</default>

扩展的CSS文件(仅在类别页面上加载)添加在模块的XML布局文件中:

<catalog_category_layered>
    <reference name="head">
        <action method="addItem">
            <type>skin_css</type>
            <name>css/extension.css</name>
        </action>
    </reference>
</catalog_category_layered>

这是我在类别页面上加载的CSS文件的顺序,扩展的CSS在主题的CSS之后加载:

• /default/mytheme/css/styles.css
• /default/mytheme/css/theme.css
• / default/mytheme/css/extension.css

我想要实现的目标:扩展的CSS在主题CSS之前加载.
如何强制这个CSS文件的顺序:

• /default/mytheme/css/styles.css
• / default/mytheme/css/extension.css
• /default/mytheme/css/theme.css

我注意到如果我安装了很多扩展,一些扩展的CSS在主题的CSS之前加载,其他一些扩展的CSS在主题的CSS之后加载.我假设它与Magento中的模块顺序有关,但我不明白如何影响前端的CSS(或JavaScript)文件的顺序.

Answer 1

这里有两件事我将首先详细说明:1)加载布局XML文件的顺序和2)处理布局句柄的顺序.

1 - 布局xml文件按加载扩展的顺序加载.扩展按字母顺序加载(当服务器读取app/etc/extensions中的文件时),但是当存在模块依赖性时,将首先加载另一个模块所依赖的模块.Magento实际上遍历所有这些XML文件两次以实现此目的.第一次读取所有扩展,第二次按顺序加载它们/然后按字母顺序加载所有剩余的加载.然而,local.xml是一种特殊情况,并且始终最后加载,以使其指令优先于任何扩展的布局指令.

现在我知道你在想什么"如果最后加载local.xml,为什么之后加载扩展的CSS文件？" 那是因为以下......

2 - 处理布局句柄的顺序.在这种特殊情况下,这就是你的到来.尽管在扩展程序的布局文件之后加载了local.xml ,但这是因为扩展程序的目标是"catalog_category_layered"布局句柄.这个布局句柄在布局句柄'default' 之后被处理.正因为如此,你在主题的CSS文件之后加载了扩展的CSS文件.

那么解决方案是什么？很简单,虽然有点烦人.在local.xml文件中,您只需要定位此布局句柄,然后首先删除主题的CSS文件,然后重新添加.

这应该是你的诀窍:

<catalog_category_layered>
    <reference name="head">
        <action method="removeItem">
            <type>skin_css</type>
            <name>css/theme.css</name>
        </action>
        <action method="addItem">
            <type>skin_css</type>
            <name>css/theme.css</name>
        </action>
    </reference>
</catalog_category_layered>

您的网站将在此布局句柄中按照扩展程序的说明处理这些说明.因此,您的CSS文件也将在之后加载.