在所有扩展 css 文件之后添加 css 文件答案

【问题标题】：Adding css file after all extensions css files在所有扩展 css 文件之后添加 css 文件
【发布时间】：2015-03-01 09:32:06
【问题描述】：

我是 magento 的新手，我想在 page.xml 中添加一个 css 文件“responsive.css”。但是这个文件我想添加最后的所有 css 文件，包括扩展的 css 文件。

<block type="page/html_head" name="head" as="head">
  <!-- other css & js files -->
  <action method="addCss"><stylesheet>css/responsive.css</stylesheet></action>
</block>

如果我查看页面源代码，我的 responsive.css 文件会显示在扩展 css 文件之前。所以请帮助我如何最终包含所有 css 文件。

【问题讨论】：

标签： css magento magento-1.7 magento-1.8

【解决方案1】：

试试

  <action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>

【讨论】：

请添加一些解释，说明为什么他应该使用您的解决方案以及为什么他的解决方案不起作用。以目前的形式，这个答案对观众来说几乎没有价值，而且很容易被删除。

【解决方案2】：

我在谷歌上进行了快速搜索，发现了 magento 堆栈交换网站和一个似乎对你有用的绝妙答案：https://magento.stackexchange.com/questions/12150/overwriting-a-css-style

解决此问题的一种方法是将声明放在主题布局文件夹的 local.xml 中，而不是使用 page.xml。这将最后加载，因此您的 css 覆盖将最后出现。
解决此问题的另一种方法是创建自定义布局文件并从本地模块的 config.xml 中引用它
编辑底部的原始css文件以覆盖其样式

有关此修复列表的更多信息，请参阅上面的帖子。基本上，您正在寻找在要覆盖的代码之后插入 css 代码的方法，这样您就可以避免使用 !important 声明。

【讨论】：

【解决方案3】：

您可以在 page.xml 中删除并再次添加您的 responsive.css。确保在添加所有其他 css 文件后执行此操作：

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <!-- ... add your other css files ... -->
            <action method="removeItem"><type>responsive_css</type><name>css/responsive.css</name></action>
            <action method="addItem"><type>responsive_css</type><name>css/responsive.css</name></action>
        </reference>
    </default>
</layout>

【讨论】：