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

Có cách nào để tạo tệp CSS của riêng tôi tải lần cuối trong tầng không?

Nếu vậy, làm thế nào và ở đâu để tôi thêm tệp CSS tùy chỉnh của mình?

magento2 css

— H. Ferrence
nguồn

Câu trả lời:

Để thêm css tùy chỉnh và tải lần cuối, bạn phải thiết lập một chủ đề tùy chỉnh.

Tạo chủ đề: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/theme/theme-create.html
Đảm bảo rằng bạn đặt ứng dụng Magento của mình ở chế độ nhà phát triển.
Thêm các thư mục sau vào chủ đề tùy chỉnh của bạn

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

Tạo các tệp sau:

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

đặt mã này trong default_head_blocks.xml

<?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>

Áp dụng chủ đề của bạn: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/theme/theme-apply.html
Triển khai tài nguyên tĩnh (SSH đến magento root):

php bin/magento setup:static-content:deploy

— Joshua34
nguồn

Xin chào, tôi mới làm như vậy, nhưng tệp css tôi thêm, không tải và khi tôi kiểm tra trang, nó sẽ báo lỗi GET cho tệp, với 500 (Lỗi máy chủ nội bộ) bạn có biết gì về nó không có thể là?

— alexcr

Lệnh CLI để triển khai: php bin / magento setup: static-content: triển khai

— Joshua34

Tôi nên đặt gì vào hai tệp CSS mới mà tôi đã tạo? Chỉ là CSS thuần ??

— styzzz

@styzzz vâng, css thô là ok.

— Joshua34

Vâng Tôi vừa mới làm điều đó, đã tải các tệp local-m.css và local-l.css lên web / css .... xóa bộ nhớ cache và chạy php bin / magento setup: static-content: triển khai. Tôi đang ở chế độ nhà phát triển. Nó vẫn không chọn chúng. Default_head_blocks.xml của tôi chính xác như trên. Nhưng nó vẫn không sử dụng những stypes mà tôi đã đặt trong CSS

— styzzz

Để thêm css tùy chỉnh và tải lần cuối

Theo cấu trúc thư mục

ứng dụng / mã / nhà cung cấp / modulename / view / frontend (đối với admin adminhtml) / web / css / filename.css
Thêm đường dẫn tệp css vào tệp bố cục tương ứng như được đưa ra dưới đây
```
<head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>
```

— Manish
nguồn

Bao gồm Vendor_Modulekhông làm việc cho tôi. Loại bỏ nó hoạt động tốt.

— Saravanan DS

@SaravananDS bạn cần thay thế bằng tên gói và tên mô-đun.

— Manish

Vâng. Sau khi thay thế bằng tùy chỉnh của tôi, Vendor_Modulenó chỉ không hoạt động.

— Saravanan DS

@M Biến, chúng tôi chỉ có thể tải tệp css tùy chỉnh trong trang kết quả tìm kiếm?

— jafar pinjar

Ở đây không cần sử dụng chủ đề trẻ em?

— HaFiz Umer

Bạn có thể thêm thuộc tính media mà magento 2 sẽ đặt vào cuối css trong phần đầu. Đặt chiều rộng chỉ 1px sẽ cho phép nó trên tất cả các thiết bị:

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

— Cypher909
nguồn

cảm ơn bạn, bạn đã cứu ngày của tôi Tôi muốn làm việc với các tập tin .less và biên dịch mỗi khi tôi chỉnh sửa chúng.

— bourax

Ở đây không cần phải làm chủ đề tùy chỉnh đầu tiên?

— HaFiz Umer

@HaFizUmer Bạn nên tạo một chủ đề tùy chỉnh trước. Thực hiện theo các hướng dẫn từ câu trả lời được chấp nhận và sau đó sử dụng phương pháp tôi hiển thị ở đây.

— Cypher909