Not 1: Bu daima uzattığınızı varsayar magento-blank.
Not 2: <theme-dir>olduğuapp/design/frontend/Vendor/theme/
Temel bilgiler: Temel Değişkenleri Değiştirme
(tl; dr için, sonuç atla)
Bulduğum rehberlerin çoğu, bu adımı sadece LESS ile temasa sokuyor, bu yüzden kısa tutmaya çalışacağım. Magento 2, temanın yaygın olarak kullanılan yönlerini tanımlayan temel Değişkenler kümesine sahiptir. Renkler, yazı tipleri, sayfa başlıklarının tarzı vb. Bu değişkenlerde tanımlanır.
İçinde <magento-root>/lib/web/css/source/lib/variables/sezgisel olarak adlandırılmış LESS dosyaları içeren bir dizi bulacaksınız. Bunların her birinde Magento 2'deki ortak öğelerin çoğu için değişkenlere atanan değerleri bulabilirsiniz.
Bu değişkenlerden herhangi birini değiştirmek için, içinde bir dosya oluşturmanız yeterlidir <theme-dir>/web/css/source/_theme.less.
Örnek:
@newPrimary: #1980fe;
@primary__color: @newPrimary;
@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);
Teknik olarak, buraya herhangi bir CSS veya LESS koyabilirsiniz ve sitenize başarıyla uygulanacaktır (ancak bunu yapmayın). Bunun bir anda nasıl çalıştığını açıklayacağım.
Yeni CSS dosyası ekleme
Tüm şablon sayfalarınızın başına yeni bir CSS ekleyebilirsiniz.
Yarat <theme-dir>/Magento_Theme/layout/default_head_blocks.xml:
<?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>
<css src="css/myStyle.css" />
</head>
</page>
Sonra yeni CSS veya LESS'inizle bir dosya yaratırsınız:
<theme-dir>/web/css/myStyle.less. Buraya LESS veya CSS yazabilirsiniz.
Mevcut Stilleri Geçersiz Kılma
Magento 2 LESS'in basitçe yeni bir CSS dosyası ekleyerek değiştirilmediğini öğrendim. İşte bu noktada kaybolmaya başladım ve Magento 2'nin LESS dosyalarını nasıl bulduğunu açıklayacağım.
Varsayılan olarak, Magento 2 bu dosyaları içerir (ve sonuçta geri düşer):
<Magento_Blank_theme_dir>/web/css/styles-m.less //Mobile Styles
<Magento_Blank_theme_dir>/web/css/styles-l.less //Desktop enhancements
<Magento_Blank_theme_dir>/web/css/print.less //Print Styles
Bu dosyalar genellikle daha da fazla LESS dosyası içeren diğer LESS dosyalarını içerir (içe aktarır). Ve burası diğer rehberlerin bana yararsız hale geldiği yerdi ve bulduğum şeyi elimden geldiğince açıklayacağım.
Kaynak / lib Magic
Gelen styles-m.less, çizgi vardır: @import 'source/lib/_responsive.less';. Temada hiçbir source/libdizin olmadığını fark edeceksiniz magento-blank. Magento 2 stillerinin nihayetinde geri dönüldüğü çok açık <magento-root>/lib/web/css/. Orada bulursun source/lib/_responsive.less.
Kullandığınız değişkenler , temada içe aktarılan _theme.lessbir source/libdosya nedeniyle kullanılabilir magento-blank. Not: _theme.less varsayılan temalardaki boş bir dosyadır. Bunun neden not edilmesinin önemli olduğunu öğrenmek için okumaya devam edin.
"Otomatik olarak dahil" LESS dosyaları
Birkaç rehber, <theme-dir>/web/css/_styles.lessMagento'nun otomatik olarak bu dosyayı aradığı ve içerdiği için yaratabileceğiniz konusunda ısrar etti . Bunu kötü bir tavsiye olarak buldum.
Oluşturursanız <theme-dir>/web/css/_styles.lesssiteniz bozulur. theme-frontend-blank/web/css/styles-m.lessithalatı _styles.less, hangi dönüş ithalatta 3 daha .less dosyaları hangi her ithalat daha da .less dosyaları.
Bir oluşturursanız _styles.less, geçersiz kılıyorsunuzdur. Geçersiz kıldığınızda _styles.less, içe aktardığı tüm dosyaları ve bu dosyaların içe aktardığı tüm dosyaları vb.
Hakkında not _theme.less: Bu dosya varsayılan temalarda boştur ve bu nedenle temanızı varsayılan bir temele dayandırıyorsanız eklemeye başlamak ve eklemek için güvenlidir. Ancak, zaten varsayılan bir temayı genişleten bir temayı genişletiyorsanız, şanslar_theme.lesszaten kullanılır. Bunu tekrar yaratmak onu geçersiz kılacaktır.
Büyülü @magento_import
In styles-m.lesssize dışarı yorumladı birkaç satır göreceksiniz:
//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets
Bu satırlar aslında yorum yapmadı! Magento 2 ile başlayan hatlar için özel işlem var //@magento_import. Bu satırlar yalnızca adresindeki dosyalara eklenebilir <theme-dir>/web/css.
Yukarıdaki satırlar, Magento 2'ye verilen deseni izleyen temanın içine herhangi bir dosyayı dahil etmesini söyler. Yani yukarıdaki satırlar otomatik olarak içerecektir:
'<theme-dir>/Magento_Catalog/web/css/source/_widgets.less';
'<theme-dir>/Magento_Catalog/web/css/source/_module.less';
'<theme-dir>/Magento_Cms/web/css/source/_widgets.less';
'<theme-dir>/Magento_Cms/web/css/source/_module.less';
'<theme-dir>/Magento_Reports/web/css/source/_widgets.less';
'<theme-dir>/Magento_Reports/web/css/source/_module.less';
...and so on
Yeni bir modül veya zaten bu dosyaya sahip olmayan bir modül olsa bile, dosya isimleri eklemek _widgets.lessve otomatik olarak bulunup _module.less eklenecektir .
Magento-Blank'in çoğu Modül için bu dosyaları içerdiğini ve bu yöntemi kullanmak istiyorsanız, orijinalleri kopyalayıp yapıştırmanız gerekeceğini unutmayın (tamamen yeniden yazmadığınız sürece).
Sonuç
(Oku: kullanmayın _styles.less).
Bir öğenin CSS'sini değiştirmek istediğinizde, bu stilin hangi dosyada tanımlandığını bulmak için elinizden gelenin en iyisini yapmak istersiniz. Bazen tek yapmanız gereken bir değişkeni değiştirmek _theme.less. Çoğu zaman, bence, _module.lessya da _widgets.lesstemanıza kopyalayıp yapıştırmanız ve değişiklikleri yapmanız gerekecektir .
Yeni bir modül oluşturduysanız veya yeni HTML öğeleriniz varsa, bir LESS dosyası oluşturmanız ve <head>her sayfada ayrı olarak bulundurmanız gerekebilir .
Komplike durumlarda, yeni bir oluşturmanız gerekebilir @importveya @magento_import. Yaptıklarınız için mantıklı olan en düşük çocuğu bulmak istiyorsunuz, bu yüzden bir sürü gereksiz dosyayı kopyalayıp yapıştırmayacaksınız veya @importhiçbir yere yol açmayan kafa karıştırıcı çizgiler ekleyemezsiniz.