Magento 2 - Làm thế nào để thêm tập tin css tùy chỉnh vào đầu?

8

Trong Magento 1.x, tôi có thể thêm các tệp CSS vào phần đầu bằng cách sử dụng trình trợ giúp như mã bên dưới.

<reference name="head">
    <action method="addCss"><stylesheet helper="module/helperclass/helperfunction"/></action>
</reference>

Bất cứ ai cũng biết làm thế nào để làm điều này trong Magento 2?

magento2 layout xml

— Mike
nguồn

bạn đã sắp xếp cái này chưa? hoặc bạn có bất kỳ thay thế về điều này. hãy cho tôi biết nếu bạn tìm hiểu một số

— Dev

1

xin lỗi, tôi không có giải pháp nào bây giờ, tôi đã thêm mã này <link rel = "Stylesheet" type = "text / css" media = "all" href = "<? php echo $ _helper-> getCSSFile ()?>"> vào "after.body.start " thùng đựng hàng.

— Mike

Tôi tìm thấy giải pháp, xin vui lòng kiểm tra câu trả lời dưới đây.

— Mike

9

Bạn không cần người trợ giúp, bạn có thể sử dụng mã này bên dưới trong bố cục của mình:

<head>
    <css src="Namespace_YourModule::css/styles.css"/>
</head>

— Thảo Phạm
nguồn

Bởi vì tôi cần thêm tập tin css động.

— Mike

Bạn có thể vui lòng cung cấp ví dụ src cho mô-đun liên hệ nếu tôi muốn thêm tệp style.css trong trang bằng biểu mẫu liên hệ không? Tôi đã thử <css src = "Magento_Contact :: css / style.css" /> nhưng nó không hoạt động ... Tôi thiếu dòng chảy của magento bao gồm rõ ràng. Tệp Styles.css nằm trong thư mục mô-đun / xem / css / ...

— Lachezar Raychev

Xin chào @LachezarRaychev, nếu xử lý của bạn ở lối vào, bạn cần tạo styles.csstệp trong ../view/frontend/css/style.css. Với phụ trợ, bạn cần tạo styles.csstập tin trong ../view/adminhtml/css/style.css.

— Thảo Phạm

đã thử và đặt # contact-form {Border: 1px solid blue! quan trọng; } không hoạt động ... tệp nằm trong view / frontend / css / style.css và <css src = "Magento_Contact :: css / styl.css" /> nằm trong contact_index_index.xml trong <head> </ head> phần tử .... không có viền màu xanh xung quanh mẫu ... thực sự kỳ lạ ..

— Lachezar Raychev

Nvm ... tôi đã phải tạo thư mục Magento_Contact trong static / frontend / Magento / luma / sv_SE và bên trong tạo thư mục css / và bên trong đặt tệp Styles.css ... bây giờ nó hoạt động. Tôi chỉ nghĩ theo cách đó nó sẽ nhập mẫu tệp bên trong thư mục mô-đun / xem / frontend / css / ...

— Lachezar Raychev

8

Hãy thử các bước này.

Tạo tập tin css trong thư mục này. ứng dụng / thiết kế / frontend / Nhà cung cấp / chủ đề / web / css / customcss.css
Tạo tệp default_head_blocks.xml nếu không tồn tại tại đường dẫn này ứng dụng / design / frontend / Vendor / theme / Magento_Theme / layout / default_head_blocks.xml

Đặt mã bên dưới vào 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>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
        <css src="css/customcss.css" />
    </head>
</page>

Hy vọng điều này sẽ giúp bạn !!

— Makwana Ketan
nguồn

Tôi có cần chạy bất kỳ lệnh grunt nào sau khi làm điều này không?

— TheBlackBenzKid

1

tên tập tin css là động. bây giờ, tôi đã thêm mã này <link rel = "Stylesheet" type = "text / css" media = "all" href = "<? php echo $ _helper-> getCSSFile ()?>"> vào "after.body.start "Container, làm cách nào để thêm mã này vào <head>?

— Mike

6

Tôi tự tìm giải pháp.

Trong Bố cục tệp xml.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="block_name" template="custom_head.phtml" />
        </referenceContainer>
    </body>
</page>

Trong tệp custom_head.phtml

<link rel="stylesheet" type="text/css" media="all" href="<?php echo $_helper->getCSSFile()?>">

— Mike
nguồn

1

Tạo mô hình tùy chỉnh

thêm tệp xml Namespace / YourModule / view / frontend / layout / default_head_blocks.xml

tệp này sẽ thay đổi bố cục đầu bằng cách sử dụng cấu hình trang đọc thêm trên http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-types.html#layout-types-conf

ví dụ nội dung tập tin

<?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="Namespace_YourModule::css/custom.css" />
    </head>
</page>

sau đó thêm tệp css trên đường dẫn này Namespace / YourModule / view / frontend / web / css / custom.css

— Mohamed Abo Badawy
nguồn

Cảm ơn câu trả lời. Nó làm việc cho tôi. Bây giờ css được áp dụng trong tất cả các trang sử dụng tệp này.

— Vinay Sikarwar

Bạn có thể giúp tôi không, làm thế nào bây giờ tôi chỉ có thể áp dụng nó trong trang sản phẩm

— Vinay Sikarwar

Không chắc chắn về điều này nhưng những gì về lớp cơ thể xem .catalog-sản phẩm mà magento sử dụng trên trang sản phẩm bạn có thể thừa hưởng các thuộc tính CSS từ nó!

— Mohamed Abo Badawy