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>

在模块的XML布局文件中添加

扩展的CSS文件（仅在类别页面上加载）：

<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
  
• /默认/ mytheme的/ CSS /的 extension.css
  

我想要实现的目标：扩展程序的CSS在主题CSS之前加载 如何强制执行此CSS文件顺序：

  

  
• /default/mytheme/css/styles.css
  
• /默认/ 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文件也将在之后加载。

Answer 2

也许这有帮助

Theme Precedence / Priority