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.


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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.