将 css 文件加载到 Magento答案

【问题标题】：Loading a css file to Magento将 css 文件加载到 Magento
【发布时间】：2014-10-10 12:25:56
【问题描述】：

所以我基本上有了自己的整个 css 布局，我想改变我的 magento 前端的布局。我查看了这篇文章：How to apply CSS to Magento CMS Page，但它没有加载我的 css。我这样做了：

我添加到自定义布局更新 XML：

<reference name="head">
<action method="addCss"><stylesheet>csstest/style.css</stylesheet></action>
</reference>

在我的 html 编辑器中，我得到了这个：

<div class="header">&nbsp;</div>
<div class="header_2">&nbsp;</div>

Css 以防万一：

.header{
width:80%;
margin-left:10%;
height:15%;

/*border-radius:12px; */
background-color:white;
}

.header_2{
width:80%;
margin-left:10%;
height:5%;
background-color:grey;
font-size:200%;
}

我的style.css在这个目录下：/skin/frontend/default/csstest/我也试过放进去：skin/frontend/default/default/css/

我是不是忘记了什么？

【问题讨论】：

您是否收到任何关于是否找到脚本的控制台警告？
@user3154108 当我在 Firefox 中使用 CTRL + U 时，它没有显示链接 rel="stylesheet" style.css。所以他没有进入正确的目录或其他什么？还是配置不好？
试试 ctrl+shift+k，它会打开记录警告和错误的控制台。如果找不到该文件，控制台将向您发出警告并告诉您在何处查找文件。这样的错误消息将有助于找出问题。
试试/skin/frontend/default/default/csstest/
@user3154108 我只从不同的 css 文件中得到错误：05:20:49.306 未知属性“-moz-opacity”。声明被放弃。 styles.css:1006 05:20:49.309 未知属性“-moz-box-shadow”。声明被放弃。 styles.css:1525 05:20:49.309 未知属性“-moz-box-shadow”。声明被放弃。 styles.css:1692 05:20:49.309 未知属性“-moz-box-shadow”。声明被放弃。 styles.css:1696 05:20:49.309 未知属性“-moz-border-radius”。声明被放弃。 styles.css:1696 05:20:50.529 不推荐使用 getPreventDefault()。请改用 defaultPrevented。 magento

标签： html css xml magento

【解决方案1】：

为什么不使用简单的方法来添加您的 CSS 样式？

添加到head.phtml

<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('csstest/style.css') ?>">

或将其添加到您的local.xml

<?xml version="1.0">
<layout>
    <default>
        <reference name="head">
            <action method="addItem"><type>skin_css</type><file>csstest/style.css</file></action>
        </reference>
    </default>
</layout>

别忘了检查你在正确文件夹中的样式。

【讨论】：

【解决方案2】：

你也可以试试

把你的 csstest/style.css 放到 css 文件夹中

<action method="addItem"><type>skin_css</type><file>css/csstest/style.css/file></action>

【讨论】：

【解决方案3】：

这对我有用：

<reference name="head">
<action method="addCss">
<stylesheet>../csstest/css/style.css</stylesheet>
<params>media="screen"</params></action>
</reference>

在自定义布局更新 XML 中

【讨论】：