One of the most common tasks a fronted developer will How to add a Custom CSS File in Magento2
In this Tutorial you’ll learn step-by-step instruction on How to add a Custom CSS File in Magento2.
In Magento2, the Syntax to add style sheet is different, as well as the files added a different location in Magento2
If You have to add Custom css. You have to Open default_head_blocks.xml file. This File is Located in
app/design/(Your_Package)/(Your_theme)/Magento_Theme/layout
Open default_head_blocks.xml then add the CSS file in Layout Configuration.
|
1 2 3 4 5 6 |
<?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/custom.css" /> </head> </page> |
The CSS File is Located in
app/design/(Your_Package)/(Your_theme)/web/css/custom.css
Magento2 use css Files from pub/static . Clear the Original static Files within the pub/static and run this Command
|
1 |
php bin/magento setup:static-content:deploy |
if You refresh your magento Store, You should be able to see your css file is being included in Magento Fronted.
Hope this Helps
