Magento 2 - Ghi đè CSS mà không cần sử dụng! Quan trọng ở mọi nơi

Hiện tôi đang làm việc trên một trang web Magento 2 cho một khách hàng. Giả sử thương hiệu của khách hàng của tôi là boofarvà chủ đề tôi đang cố gắng mở rộng / ghi đè là foobartôi đã đặt làm chủ đề chính bằng cách sử dụngfrontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

Sau đó, frontend/Foobarthemes/boofar/web/css/source/_theme.lesstôi đã viết mã CSS mà tôi muốn ghi đè. Tôi cũng đã thử điều này với _extend.less.

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

Tôi buộc phải sử dụng !importantcho bất cứ điều gì để làm việc ở đây. Không có phông chữ và công cụ văn bản nào hoạt động trong đoạn mã trên.

Tôi đã không hiểu chính xác quy trình làm việc Magento 2?

Bạn chỉ muốn có kiểu của mình trong _theme.lesstệp nếu bạn muốn ghi đè _theme.lesstệp của chủ đề gốc . Đối với tệp đó, chỉ một trong số chúng được tải và nó sẽ luôn là chủ đề được chọn nếu tệp tồn tại ở đó. Từ đó, nó sẽ sử dụng lược đồ dự phòng để tìm tệp đó và sử dụng nó.

Vì vậy, trong trường hợp của bạn, sử dụng _extend.lesstệp là tệp phù hợp để sử dụng.

Mặc dù điều này hơi khó hiểu, vì mã được đưa vào _extend.lesstệp được tải lần cuối cùng khi Magento biên dịch tất cả các kiểu tồn tại trong trang web. Vì vậy, tôi tự hỏi nếu có một cái gì đó gây rối với thứ tự tải.

Nhìn qua cách bạn thiết lập nó, hãy thử thiết lập chủ đề của bạn trong một không gian tên khác và không trong cùng một chủ đề. Điều này có thể không giải quyết được vấn đề, vì cách bạn thiết lập chủ đề của mình cũng giống như Magento có chủ đề luma / blank được thiết lập. Nhưng đối với tất cả các công việc tôi đã thực hiện, tôi có không gian tên người bán hàng của mình, sau đó sẽ mở rộng từ chủ đề của bên thứ 3 hoặc từ luma / blank.

Điều tiếp theo cần thử là gói mã của bạn trong các truy vấn phương tiện tích hợp. Tôi đi vào chi tiết hơn ở đây , nhưng về cơ bản, nó ngăn kiểu của bạn được tải hai lần vào styles-l.cssvà các styles-m.csstệp.

//
//    Common
//--------------------------------------
& when (@media-common = true) {}  

Từ đó, tất cả bắt nguồn từ tính đặc hiệu của CSS. Nếu có cái gì khác cao hơn của bạn, bạn cần phải cụ thể hơn trong định nghĩa lớp / id của bạn trong các kiểu. Bạn có thể muốn đăng một bức ảnh về cấu trúc DOM để hiển thị những gì bạn đang nhắm mục tiêu và những gì đang vượt qua những gì bạn đang muốn nhắm mục tiêu.

Nếu bạn có thể áp dụng các kiểu của mình trong tệp _extend.less, điều này có nghĩa là bạn có vấn đề với tính đặc hiệu của css. Vì Magento2 sử dụng ít biên dịch hơn, hầu hết các kiểu đều rất cụ thể. Để ghi đè chúng, bộ chọn kiểu của bạn phải cụ thể hơn hoặc bằng nhau. Tôi sẽ không đăng chi tiết về khái niệm này ở đây vì có rất nhiều bài viết có thể được tìm thấy trực tuyến.

Nếu bạn đang sử dụng thiết lập LESS mặc định thì hãy đảm bảo TẤT CẢ LESS của bạn được ghi bên trong các truy vấn phương tiện M2 LESS. Nếu bạn không kết thúc với CSS trùng lặp và có thể là các vấn đề cụ thể.

Tất cả điều này phụ thuộc vào tính đặc hiệu và thứ tự tải, CSS của bạn sẽ được tải sau các chủ đề chính (hoặc mô-đun) để ghi đè lên tất cả những gì bạn cần làm là đáp ứng tính đặc hiệu của chúng.

Ví dụ: nếu chủ đề gốc sử dụng

.parent-selector .selector {
    ...
}

Sau đó, bạn cần phải viết cùng một bộ chọn, nếu vì lý do nào đó không hoạt động, bạn chỉ cần thêm một bộ chọn khác trước nó. Một cách dễ dàng là thêm phần thân trước nó, vì nó bao gồm mọi bộ chọn và thêm tính đặc hiệu. Thích như vậy:

body .parent-selector .selector {
    ...
}

Bài viết này chứa một số thông tin tốt về tính đặc hiệu của CSS.

Ngoài ra, bạn có thể ghi đè lên toàn bộ tập tin

Nếu bạn đang thực hiện nhiều tùy chỉnh, tốt hơn hết là ghi đè lên toàn bộ tệp thay vì mở rộng. Để làm điều này, chỉ cần thêm tệp vào chủ đề của bạn bằng cách sử dụng cùng tên và đường dẫn tệp.

Đối với mức độ ưu tiên cao hơn, bạn có thể nhân đôi bộ chọn:

  .home.home {
    display: none;
  }

Bạn phải ghi đè cùng một .lesstệp của chủ đề gốc mà bạn muốn ghi đè, như nếu bạn muốn ghi đè _theme.lesstệp, thì bạn phải sao chép tệp này vào chủ đề con ở đây (đảm bảo cùng một đường dẫn của chủ đề gốc)

frontend/Foobarthemes/boofar/web/css/source/_theme.less

bạn có thể ghi đè css của bạn ở đây.

Tiêm tập tin css tùy chỉnh của bạn là tốt hơn.

Đọc thêm: Cách thêm tệp CSS tùy chỉnh trong Magento 2

Và Tài liệu pháp sư: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html

Hãy nhớ biên dịch bằng cách sử dụng grunt / less để xử lý css: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html