How to add custom css in magento 2.2.2

by Shiva Reddy   Last Updated January 19, 2018 15:09 PM

I am a new to magento forntend devloper i tried search for this solution i am not getting any solution. This is my custom theme folder structure in Magento 2.2.2 i saved default_header_html.xml file in the following way in layout folder..

app/design/frontend/custom-theme/my-first-theme/view/layout/default_header_html.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>
            <css src="../../web/css/abc.css"/>
        </head>
    </page>

My css folder path

app/design/frontend/custom-theme/my-first-theme/web/css/abc.css

using above xml file i tried to access abc.css file but not working. Can u please help me for accessing my abc.css file

Tags : magento2.2.2


Answers 3


change

<css src="../../web/css/abc.css"/>

to

<css src="css/filename.css"/>
Chander Shekhar
Chander Shekhar
January 19, 2018 14:50 PM

Your XML file path is Wrong.

app/design/frontend/Vendor/theme/Magento_Theme/layout/default_header_html.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/filename.css" />
        <script src="js/filename.js"/>
    </head>
</page>

Put your JS and CSS file in below path.

app/design/frontend/Vendor/theme/web/css/filename.css app/design/frontend/Vendor/theme/web/js/filename.css

Hope it helps :)

Abhishek Panchal
Abhishek Panchal
January 19, 2018 15:05 PM

Create a file or copy it from parent theme to

app/design/frontend/custom-theme/my-first-theme/Magento_Theme/view/layout/default_header_html.xml

inside this file add entry to your css file as

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="css/abc.css" /> </head> </page>

Finally, add your abc.css file to the web/css folder of your my-first-theme

mskhan
mskhan
January 19, 2018 15:07 PM

Related Questions



Magento 2.2 Not Loading theme and blocks

Updated January 11, 2018 02:09 AM



Magento 2 contributing tests to the new MFTF

Updated February 13, 2018 10:09 AM