How to add custom css file in magento2.2.6?

https://magento.stackexchange.com/questions/232726

17-01-2021
|

Question

I tried to add some custom styles in Magento but I couldn't find out how to do this.

How do I add the custom css stylesheets in magento-2.2.6?

Solution

You need to follow the below steps:

Step 1: Create default_head_blocks.xml like below:

app/design/frontend/[vendor]/[theme]/Magento_Theme/layout/default_head_blocks.xml

Step 2: Andd create local.css like below

app/design/frontend/[vendor]/[theme]/web/css/local.css

Step 3: Add the below code to 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.css" />
  </head>
</page>

OTHER TIPS

You have to add it in your current theme like this:

app/design/frontend/{Yourtheme}/{name}/Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
    <head>
        <css src="css/local.css" />
    </head>
</page>

app/design/frontend/{Yourtheme}/{name}/web/css/local.css
```
Your css code goe here
```

Deploy the static content:

php bin/magento setup:static-content:deploy -f

Licensed under: CC-BY-SA with attribution

Not affiliated with magento.stackexchange