Ghi đè các kiểu chủ đề trống trong Magento 2

Làm thế nào bạn có thể ghi đè các kiểu điều hướng cho một chủ đề tùy chỉnh khi kế thừa từ chủ đề trống trong Magento 2?

Tôi có một theme.csstập tin trong app/design/frontend/<Vendor>/<theme>/web/cssthư mục của mình , nhưng tôi biết rằng Magento 2 sử dụng LESS. Tôi có thể dễ dàng ghi đè lên các kiểu trong biểu theme.cssđịnh kiểu của mình , nhưng tôi không muốn tiếp tục sử dụng !important.

Ngoài ra, tôi đang sử dụng Bootstrap 3 và tôi giả định rằng các kiểu từ chủ đề trống sẽ ghi đè bất kỳ hướng dẫn kiểu nào phù hợp với Bootstrap. Cách tốt nhất để tiếp cận điều này là gì?

— Gareth Daine
nguồn

Câu trả lời:

2 cách được Magento đề xuất để ghi đè hoặc mở rộng các kiểu từ chủ đề gốc:

1. Cách đơn giản

Mở rộng:

Trong thư mục chủ đề của bạn, tạo một web/css/sourcethư mục con. (Bạn đã thực hiện phần này) Tạo một _extend.lesstệp ở đó.

Theo tài liệu :

"Mở rộng chủ đề bằng cách sử dụng _extend.less là tùy chọn đơn giản nhất khi bạn hài lòng với mọi thứ mà chủ đề gốc có, nhưng muốn thêm nhiều kiểu hơn."

Ghi đè:

Thay vì tạo _extend.lesstập tin, bạn tạo một _theme.lesstập tin. Trong trường hợp này, bạn cần sao chép tất cả các biến bạn cần từ cha mẹ _theme.less, bao gồm cả các biến sẽ không được thay đổi. Sau đó thực hiện các thay đổi của bạn.

Theo tài liệu , nhược điểm là:

"Bạn cần theo dõi và cập nhật thủ công các tệp của mình bất cứ khi nào _theme.less của cha mẹ được cập nhật."

2. Cách cấu trúc

Mở rộng:

Phương pháp này cho phép bạn tổ chức mã của mình theo cách tốt hơn. Những thay đổi của bạn sẽ được cấu trúc. Thay vì sử dụng một tệp duy nhất _extend.less để bao gồm tất cả các thay đổi của bạn, bạn tạo một tệp mở rộng cho từng thành phần từ thư viện UI Magento mà bạn muốn thay đổi.

Giả sử bạn muốn mở rộng kiểu từ nút và các thành phần điều hướng. Trong thư mục chủ đề của bạn tạo 2 tệp: _buttons_extend.lessvà _navigation_extend.lesssau đó thêm các thay đổi của bạn cho từng thành phần trong tệp tương ứng.

Sau đó, bạn tạo _extend.lesstập tin thêm mã này:

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

Ghi đè:

Trong chủ đề của bạn, tạo một bản sao của tập tin tương ứng với các thành phần giao diện người dùng mà bạn muốn thay đổi ( _buttons.less, _navigation.less, vv) Tập tin này sẽ ghi đè lên _buttons.lesscác chủ đề của phụ huynh.

Điều quan trọng là nhận thấy sự khác biệt giữa ghi đè và mở rộng .

Bạn có thể đọc thêm về ghi đè và mở rộng trong tài liệu này hoặc về CSS trong Magento 2 trong Hướng dẫn dành cho nhà phát triển Frontend .

— Luis Garcia
nguồn

Vì vậy, giả sử tôi có Thư mục Vendor_Namespace, tôi thêm vào đó một thư mục khác có tên "web / css / source / _extend.less" và _extend.less-File trong web / css / source / sẽ biết tệp tương ứng nằm ở đâu? Tôi có hiểu đúng không

— Tối

Có, chỉ cần tạo tập tin web/css/source/_extend.lessvà đặt phong cách của bạn trong đó.

— Luis Garcia

Tôi đã tạo một tệp _extend.less wicth nhập một _slider.less: <theme_folder> / css / source / cả hai tệp nằm trong cùng một đường dẫn, nhưng không hoạt động, tất cả các quy tắc trong _slider.less không được tìm thấy trong các tệp được tạo .css, Tôi đang ở chế độ nhà phát triển và chạy "php magento setup: static-content: triển khai"

— xzegga

Bạn đã xóa bộ nhớ cache của trình duyệt của bạn?

— Luis Garcia

Tôi có thể ghi đè <theme_folder> / css / source / lib / biến không? Làm thế nào tôi có thể thay đổi một biến của một tập tin ít hơn? / lib / biến

— Goldy

Tôi đã có một vấn đề tương tự khi sử dụng Foundation. Cách chính thức để làm điều này là ghi đè tệp ít hơn của mô-đun cụ thể và sửa đổi css ở đó. Sau đó, nó sẽ được Magento chọn trong quá trình biên dịch

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

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

Cuối cùng, tôi đã loại bỏ tất cả các tệp CSS mặc định được tạo bởi Magento. Tôi thấy việc viết CSS tùy chỉnh dễ dàng hơn nhiều, đặc biệt là sử dụng một khung như Bootstrap, hơn là cố gắng ghi đè tất cả các mô-đun khác nhau. Bạn có thể làm điều này trong:

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
nguồn

Cách tốt để cam kết công cụ. Nhưng câu hỏi là về việc "mở rộng" một chủ đề đầy đủ và thêm vào đó.

— Miguel Felipe Guillen Calo

Không, câu hỏi là về ghi đè.

— Đen

Hãy nói rằng bạn muốn ghi đè lên các kiểu - m.css , sau đó đặt bản sao vào web/csschủ đề của bạn, đặt tên là kiểu tùy chỉnh - m.css .

Sau đó, sử dụng mã này trong các chủ đề default_head_blocks.xml của bạ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" />
        ...

— Đen
nguồn