Boş Tema Tarzlarını Geçersiz Kılma in Magento 2

Magento 2'deki boş temayı devralırken özel bir tema için gezinme stillerini geçersiz kılmaya ne dersiniz?

Klasörümde bir theme.cssdosya var app/design/frontend/<Vendor>/<theme>/web/css, ancak Magento 2'nin LESS kullandığını biliyorum. theme.cssStil sayfamdaki stilleri kolayca geçersiz kılabilirim , ancak kullanmaya devam etmek istemiyorum !important.

Ayrıca, Bootstrap 3 kullanıyorum ve boş temanın stillerinin Bootstrap ile eşleşen herhangi bir stil talimatını geçersiz kılacağını varsayıyorum. Buna yaklaşmanın en iyi yolu nedir?

— Gareth Daine
kaynak

Yanıtlar:

Bir ana temanın stillerini geçersiz kılmanın veya genişletmenin Magento tarafından önerilen 2 yolu:

1. basit yolu

uzatın:

Tema dizininizde bir web/css/sourcealt dizin oluşturun. (Bu bölümü zaten yaptınız) _extend.lessOrada bir dosya oluşturun .

Belgelere göre :

"_Extend.less kullanarak bir temayı genişletmek, ana temanın sahip olduğu her şeyden memnun olduğunuzda, ancak daha fazla stil eklemek istediğinizde en basit seçenektir."

Geçersiz Kıl:

_extend.lessDosya oluşturmak yerine bir _theme.lessdosya oluşturursunuz. Bu durumda _theme.less, değiştirilmeyecek olanlar da dahil olmak üzere, tüm değişkenleri üst öğeden kopyalamanız gerekir . Ardından değişikliklerinizi yapın.

Belgelere göre , dezavantaj:

"Ebeveynin _theme.less dosyası her güncellendiğinde dosyalarınızı izlemeniz ve manuel olarak güncellemeniz gerekir."

2. yapılandırılmış yolu

uzatın:

Bu yöntem, kodunuzu daha iyi bir şekilde düzenlemenizi sağlar. Yaptığınız değişiklikler yapılandırılacak. Tüm değişikliklerinizi dahil etmek için tek bir _extend.less dosya kullanmak yerine, değiştirmek istediğiniz Magento UI kitaplığındaki her bileşen için bir genişletme dosyası oluşturursunuz.

Düğmeleri ve gezinme bileşenlerini kullanarak stilleri genişletmek istediğinizi varsayalım. Tema dizininizde 2 dosya oluşturun: _buttons_extend.lessve _navigation_extend.lessardından ilgili dosyadaki her bileşen için değişikliklerinizi ekleyin.

Sonra _extend.lessbu kodu ekleyerek dosyayı oluşturun :

@import '_buttons_extend.less'; 
@import '_navigation_extend.less';

Geçersiz Kıl:

Temanız olarak, değişime (istediğiniz kullanıcı arayüzü bileşeni karşılık gelen dosyanın bir kopyasını oluşturmak _buttons.less, _navigation.lessvb) Bu dosya geçersiz kılar _buttons.lessebeveyn tema.

Geçersiz kılma ve genişletme arasındaki farkın fark edilmesi önemlidir .

Bu belgede veya CSS hakkında geçersiz kılma ve genişletme hakkında daha fazla bilgiyi Ön Uç Geliştirici Kılavuzu'ndaki Magento 2'de bulabilirsiniz .

— Luis Garcia
kaynak

Diyelim ki bir Vendor_Namespace Klasörüm var, "web / css / source / _extend.less" adında başka bir klasör ekliyorum ve web / css / source / içindeki _extend.less-File / ilgili dosya nerede olduğunu bilecek mi? Bunu doğru anladım mı?

— Max

Evet, dosyayı oluşturun web/css/source/_extend.lessve stillerinizi oraya koyun.

— Luis Garcia

_Slider.less ithal bir _extend.less dosyası oluşturdum: <theme_folder> / css / source / her iki dosya aynı yolda, ancak çalışmıyor, _slider.less içindeki tüm kurallar .css oluşturulan dosyalarda bulunamadı, Geliştirici modundayım ve "php magento setup: static-content: deploy"

— komutunu

Tarayıcınızın önbelleğini sildiniz mi?

— Luis Garcia

<theme_folder> / css / source / lib / değişkenlerini geçersiz kılabilir miyim? nasıl daha az bir dosyanın bir değişkenini değiştirebilirim? / lib / değişkenler

— Goldy

Foundation'ı kullanırken de benzer bir sorun yaşadım. Bunu yapmanın resmi yolu, belirli modülün daha az dosyasını geçersiz kılmak ve orada css'yi değiştirmektir. Daha sonra derleme sırasında Magento tarafından alınacak

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html

Sonunda Magento tarafından yapılan tüm varsayılan CSS dosyalarını kaldırdım. Özel CSS yazmayı, özellikle Bootstrap gibi bir çerçeveyi kullanarak, çeşitli modüllerin tümünü geçersiz kılmaya çalışmaktan çok daha kolay buldum. Bunu şu şekilde yapabilirsiniz:

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>

— Mike Stumpf
kaynak

İşleri yürütmenin iyi bir yolu. Ancak soru, bir temayı "genişletmek" ve ona daha fazlasını eklemekle ilgilidir.

— Miguel Felipe Guillen Calo

Hayır, soru geçersiz kılmakla ilgili.

— Black

Geçersiz kılmak istediğiniz Diyelim stilleri-m.css ardından kopya koyun, web/cssbunun adı, Temanızın özel stiller-m.css .

Ardından temalarınızda default_head_blocks.xml bu kodu kullanın :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...

— Siyah
kaynak