Magento 2'de özel bir CSS dosyası nasıl eklenir

Basamağa en son yüklenen kendi CSS dosyamı oluşturmanın bir yolu var mı?

Öyleyse, özel CSS dosyamı nasıl ve nereye eklerim?

magento2 css

— H. Ferrence
kaynak

Yanıtlar:

Özel css eklemek ve en son yüklemek için özel bir tema ayarlamanız gerekir.

Tema oluştur: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
Magento uygulamanızı geliştirici moduna ayarladığınızdan emin olun.
Özel temanıza aşağıdaki klasörleri ekleyin

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

Aşağıdaki dosyaları oluşturun:

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

bu kodu default_head_blocks.xml içine yerleştirin

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>

Temanızı uygulayın: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
Statik kaynakları (SSH'den magento köküne) dağıtın:

php bin/magento setup:static-content:deploy

— Joshua34
kaynak

Merhaba, Sadece yaptım, ama eklediğim css dosyası yüklenmiyor ve sayfayı incelediğimde bana dosya için bir GET hatası veriyor, 500 (Dahili Sunucu Hatası) ile ne olduğuna dair herhangi bir fikrin var mı? olabilir?

— alexcr,

— Konuşlandırmak

Oluşturduğum iki yeni CSS dosyasına ne koymalıyım? Sadece saf CSS?

— styzzz

@styzzz evet, işlenmemiş css tamam.

— Joshua34

Evet. Bunu yaptım, local-m.css ve local-l.css dosyalarını web / css .... 'e yükledim, önbelleği temizledim ve php bin / magento kurulumunu yaptım: static-content: deploy. Geliştirici modundayım. Hala onları almıyor. Benim default_head_blocks.xml tam olarak yukarıdaki gibidir. Ama yine de CSS’de belirttiğim bu kipleri kullanmıyor

— styzzz

Özel css eklemek ve en son yüklemek için

Dizin yapısını takip et

app / code / vendor / modulename / view / frontend (admin adminhtml için) / web / css / dosyaadı.css

Css dosya yolunu, aşağıda verilen ilgili düzen dosyasına ekleyin.

<head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>

— Manish
kaynak

Dahil olmak Vendor_Modulebenim için çalışmıyor. Çıkarma iyi çalışıyor.

— Saravanan DS

@ SaravananDS paketiniz ve modül adınızla değiştirmeniz gerekir.

— Manish

Evet. Özel ile değiştirdikten sonra Vendor_Modulesadece çalışmıyor.

— Saravanan DS,

@Manish, özel css dosyasını yalnızca arama sonucu sayfasına yükleyebilir miyiz?

— jafar pinjar

Burada çocuk temasını kullanmanıza gerek yok mu?

— HaFiz Umer

Magento 2'nin css'in sonuna yerleştireceği media niteliğini baş kısımda ekleyebilirsiniz. Yalnızca 1 piksel genişlik ayarlamak, tüm aygıtlarda bunu etkinleştirir:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>

— Cypher909
kaynak

teşekkür ederim, günümü kurtardın. .Less dosyaları ile çalışmak ve onları her düzenlediğimde derlemek istiyorum.

— bourax

ilk önce özel bir tema yapmanıza gerek yok mu?

— HaFiz Umer

@HaFizUmer Önce özel bir tema yapmalısın. Kabul edilen cevaptaki talimatları izleyin ve ardından burada gösterdiğim yöntemi kullanın.

— Cypher909