Как внедрить меньше CSS с Magento?

magento.stackexchange https://magento.stackexchange.com/questions/2969

  •  16-10-2019
  •  | 
  •  

Вопрос

Я хочу использовать МЕНЬШЕ CSS -обработка для разработки тем. Обычно для реализации меньшего процессора все, что вам нужно сделать, это добавить следующие строки в <head> Tag в вашем HTML

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

В Magento я попытался добавить следующую линию в свою local.xml Файл без удачи

<action method="addItem"><type>skin_css</type><name>css/custom.less</name></action>

Это так, потому что меньше требует атрибута REL, чтобы быть rel="stylesheet/less" , но Магенто, очевидно, добавляет просто rel="stylesheet" с методом AddItem. Я также пытался перезаписать тег REL с <param>rel="stylesheet/less"</param>, но опять же без результата. Есть обходной путь? или какие -либо другие решения?
КСТАТИ. Я также нашел это этот плагин, но это также ничего не сделало.

Это было полезно?

Решение

Я знаю, что это то, что они называют «взломом», но это решило мою проблему. В конце концов, это только для развития. Я собираюсь скомпилировать нормальный файл CSS позже и удалять меньше.js. Итак Решение:
Добавьте следующие линии в ваши local.xml файл:

<action method="removeItem"><type>skin_css</type><name>css/styles.css</name></action><!-- remove main stylesheet -->
<action method="addItem"><type>skin_css</type><name>css/styles.less</name><params>id="less"</params></action><!-- add you less file with id="less" -->
<action method="addItem"><type>skin_js</type><name>js/less.js</name></action><!-- include less compiler -->

и часть «взлома» - открыть ваш Меньше подать и искать rel==="stylesheet/less" и изменить это на id==="less"
Это решение предназначено только для разработки. Если вы закончили с меньшим количеством, составьте его в CSS и удалите эти 3 линии с вашего Local.xml
Или, если вы, и вы должны, разрабатывать в Localhost, вы можете просто сохранить эти 3 строки в вашем локальном хосте, а не в установке сервера;) Таким образом, все, что вам нужно сделать после окончания редактирования, это открытый cmd, компилировать CS и загрузить его на сервер Счастливого кодирования :)

Другие советы

Решение Эрфана достаточно хорошо. Но, как сказал Рутер, вам необходимо сохранить правильный заказ, когда включать меньше файлов. В этом случае вы можете добавить файлы CSS и JS через setText method ():

<reference name="head">
<block type="core/text" name="lesscss">
    <action method="setText">
        <less>
            <![CDATA[
                <link rel="stylesheet/less" type="text/css" href="path/to/skin/custom.less" media="all" />
                <script type="text/javascript" src="/path/to/skin/js/less.js"></script>
            ]]>
        </less>
    </action>
</block>
</reference>

Согласитесь, это не лучшее решение. Однако это работает.

Вместо того, чтобы взломать меньше, другой вариант - добавить что -то вроде следующего в ваш Local.xml:

<reference name="head">
    <block type="core/text" name="lesscss">
        <action method="setText">
            <css><![CDATA[<link rel="stylesheet/less" type="text/css" href="path/to/skin/custom.less" media="all" />]]></css>
        </action>
    </block>
</reference>

ИМО, лучшее решение - создать модуль, который расширяет Mage_Page_Block_Html_Head class и добавляет метод addless или что -то в этом роде, а также добавляет конфигурацию в бэкэнд: «Включить режим живого». Хм, модуль вы связаны На самом деле выглядит интересно, если у вас есть время, вы должны посмотреть, почему это не работает для вас ...

Менее опытным решением было бы поместить тег сценария в "Разное сценарии" зона Система> Конфигурация> Проектирование. Анкет Это позволяет редактировать через CMS, и вы можете настроить его для управления в разных представлениях магазина. Не ужасно элегантно, но позволяет вам гибко добавить/удалить в среде разработчика по желанию.

Less CSS in Misc Scripts

Я был бы осторожен, используя меньше. JS в производственной среде. Каждый запрос на страницу потребует нового сборника файла inse.css. Более устойчивый маршрут - рассмотреть ваше развертывание, когда вы продвигаете изменения в прямом эфире / разработке, чтобы развертывание компилировало, тем меньше в CSS.

Таким образом, вы можете минимизировать CSS, кэш и помочь сократить время нагрузки.

Включить меньше. CSS с rel='stylesheet/less" файл в local.xml, addLinkRel() метод Mage_Page_Block_Html_Head может быть использован,

<action method="addLinkRel">
   <rel>stylesheet/less</rel>
   <href>path/to/less/file</href>
</action>

В моем случае я включил начальную загрузку. setText() так что JS всегда включает после меньшего файла. И, кажется, работает. Мой полный XML для головы:

<reference name="head">
  <action method="addLinkRel">
    <rel>stylesheet/less</rel>
    <href>skin/frontend/magentodev/default/css/bootstrap/less/bootstrap.less</href>
 </action>
 <block type="core/text" name="less.css">
   <action method="setText">
     <text><![CDATA[<script type="text/javascript" src="skin/frontend/magentodev/default/js/less/less-1.5.0.min.js"/>]]></text>
   </action>
 </block>
</reference>

Обновлять:

Была проблема с использованием addLinkRel() метод, потому что он нуждается в полном URL (я полагаю) в качестве спора для <href></href> теги. Итак, я наконец закончил свою local.xml Похоже:

<reference name="head">
    <action method="addItem"><type>skin_css</type><name>css/bootstrap/less/bootstrap.less</name><params>class="stylesheet-less"</params></action>
    <action method="addItem"><type>skin_css</type><name>css/magentodev.less</name><params>class="stylesheet-less"</params></action>
    <block type="core/text" name="stylesheet-less">
        <action method="setText">
           <text><![CDATA[<script type="text/javascript">jQuery('.stylesheet-less').attr('rel', 'stylesheet/less');</script>]]></text>
        </action>
    </block>
</reference>
<reference name="after_body_start">
    <block type="core/template" name="global.js" template="/page/html/globalJs.phtml" output="toHtml"/>
</reference>

Содержание globalJs.phtml:

<?php
/*
 * Base Theme
 */
?>
<script src="<?php echo $this->getSkinUrl('js/less/less-1.5.0.min.js')?>" type="text/javascript"></script>

И да, эта установка должна использоваться для разработки. Не для производственного сервера.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с magento.stackexchange
scroll top