In Magento 2.3.4, Need to Merge CSS on Page wise

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

  •  12-04-2021
  •  | 
  •  

Question

Many of them using Custom Theme with multiple custom modules. In custom module, we calling particular module css on Layout xml file.

When we enable Merge CSS file option under admin -> Stores > Settings > Configuration > In the panel on the left under Advanced > choose Developer.

Currently, It merge all CSS in single file and loading the entire website. But, unwanted css (which not related to the page) also loading.

I am looking to merge the CSS on page wise and working on it. If anyone have an idea about this please comment it.

Was it helpful?

Solution

I have analysed and noticed that by default Magento 2 version merging the CSS by Layout wise and with default (Theme Layout) xml file.

In order to load page wise CSS, we need to separate the custom CSS (for particular Page css) and mentioned it in the respective Layout file.

For example: In Product Page (Catalog product view)

app / code / [companyname] / [modulename] / view / frontend / layout / catalog_product_view.xml

Create the custom CSS files:

app / code / [companyname] / [modulename] / view / frontend / web / css / productpage.css (custom CSS file)

Add Custom CSS in the Layout File under head tag

<head>
<css src="[companyname]_[modulename]::css/productpage.css" />
</head>

After merging, default theme css and productpage.css will merge and load it.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top