Magento – How to add a custom CSS file

cssmagento2

In Magento 2 I have a custom theme and in the layout folder layout>default_head_blocks.xml which contains the css link.

The css file is contained in web>css>customcss.css – but the file is not linking

Best Answer

Just add new file here

app\design\frontend\Vendor\Themename\web\css\_new.less

and import this file in source file given path below

app\design\frontend\Vendor\Themename\web\css\_sources.less

import your file

(if there is not available _source.less file in your theme then go to 'vendor\magento\theme-frontend-blank\web\css\source' folder and copy file in your custom theme)

@import '_new.less';

clear cache
php bin/magento setup:static-content:deploy

Related Solutions

Magento – Magento 2 child theme: CSS files not included

<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/styles.css" />

</head>

Add your CSS in yourtheme/web/css path and run Deployed content.

That's it.

How to Override Magento Theme Layout File

To override layout from parent theme, here in your case default_head_blocks.xml from Magento/blank :

app/design/frontend/{Vendor}/{themeName}/Magento_Theme/layout/override/theme/Magento/blank/default_head_blocks.xml

More information in Magento DevDocs.

Best Answer

Related Solutions

Magento – Magento 2 child theme: CSS files not included

How to Override Magento Theme Layout File

Related Topic