Source files *.css included into layout files are compiled from *.less files. For example, let’s check any layout file of blank theme, the following .css files are inclued in the head:
|
1 2 3 4 5 |
<head> <css src="css/styles-m.css"/> <css src="css/styles-l.css" media="screen and (min-width: 768px)"/> <css src="css/print.css" media="print"/> </head> |
The root source files for the Blank theme:
Magento_Blank_theme_dir/web/css/styles-m.less
Magento_Blank_theme_dir/web/css/styles-l.less
Magento_Blank_theme_dir/web/css/print.less
So, to add our custom.less file, we have to include custom.css, which is the compiled from .less file, in the layout file as shown below:
|
1 2 3 |
<head> <css src="css/custom.css"/> </head> |
And create custom.less file on path /web/css/custom.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// /** // * Copyright © Magento, Inc. All rights reserved. // * See COPYING.txt for license details. // */ @bg-color: #d9d3d3; .center-content(){ display: flex; justify-content: center; align-items: center; text-align: center; } .second-footer-container { background-color: @bg-color; padding: 20px 0; } .custom-footer { .center-content(); margin: 0 auto; } |
Now run below commands:
– Remove existing page cache and view preprocessed to apply less
rm -rf var/cache/* var/page_cache/* generated/code/* generated/metadata/* var/view_preprocessed/* pub/static/frontend/*
– Deploy static content php bin/magento setup:static-content:deploy -f
– Flush the cache by running php bin/magento cache:flush
The source “css/custom.css” file is compiled from “css/custom.less” file.
Read More About Less Compilation Mode:
https://developer.adobe.com/commerce/frontend-core/guide/css/preprocess/#less-compilation-modes
Vikas Mishra
2024-09-05