How to add custom CSS file in magento 2.4

uir347gmai8039 · ‎06-07-2023

how can i add custom css file for

johnwebdes40a5 · ‎06-08-2023

To add a custom CSS file in Magento 2.4, you can follow these steps:

Create your custom CSS file:
- Start by creating your custom CSS file with the desired styles. You can create this file using a text editor and save it with a .css extension. For example, let's assume you've named it custom.css.
Place the CSS file in your theme directory:
- In Magento 2.4, it is recommended to add custom files in your theme directory to ensure easy maintenance and upgrade compatibility. Locate your theme directory, which is typically located in app/design/frontend/{Vendor}/{theme}/. Create a new directory named web within your theme directory, and inside the web directory, create a new directory named css. Place your custom.css file inside this css directory.
Register the CSS file in your theme's default_head_blocks.xml file:
- To include your custom CSS file in the head section of your theme, you need to register it. Open or create the default_head_blocks.xml file for your theme. This file is usually located in app/design/frontend/{Vendor}/{theme}/Magento_Theme/layout/. Add the following code inside the default_head_blocks.xml file:
```
<?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="css/custom.css" />
		</head>
	</page>
```
Clear the cache:
- After adding the custom CSS file and registering it, you need to clear the Magento cache for the changes to take effect. You can do this by running the following command in your Magento root directory:
```
php bin/magento cache:clean
```
Verify the changes:
- Visit your Magento storefront and inspect the page source code to ensure that the custom CSS file is included correctly. You should see a <link> tag referencing your custom.css file in the head section of the page.

With these steps, you have successfully added a custom CSS file in Magento 2.4, and it will be loaded on your storefront, allowing you to apply custom styles to your theme.

If you find our reply helpful, please give us kudos.

A Leading Magento Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

WebDesk Solution Support Team

Get a Free Quote | | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789

Thank You,

WebDesk Solution Support Team
Get a Free Quote | Email | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789

Location: 150 King St. W. Toronto, ON M5H 1J9

PHPCuong

Please watch this video How to add the JS and CSS files into a custom module in Magento 2 https://www.youtube.com/watch?v=JGli227W1ks, it will help you to complete your requirements.

How to add custom CSS file in magento 2.4

How to add custom CSS file in magento 2.4

Re: How to add custom CSS file in magento 2.4

Re: How to add custom CSS file in magento 2.4