Why are my styles not applying after a custom CSS file is included?

Question

I am using Magento 2.2.3. In my magneto theme added custom CSS file in the below path: project/app/design/frontend/vendor/theme/web/css/custom.css

I added source file in default_head_blocks.XML file. after that added a page with following code in HTML content

<div class="freegotest"><span class="tested">count down custom code</span></div>

In custom.css code as

.tested { 
    color: red !important; 
    font-size: 20px;
}

By viewing the page source, I can see the custom CSS file included in the header, but the styles are not applying to the text.

Can you navigate to your `custom.css` stylesheet within the browser and confirm the css lines are actually there? — Morpheus, Feb 04 '19 at 09:51

score 0 · Accepted Answer · edited Nov 03 '21 at 21:29

0

Your XML file must be named default_head_blocks.xml instead of default_head_blocks.XML.

Once the name changed, clear cache and static files :

Check if you are using dev mode With command line

php bin/magento deploy:mode:show

If developer mode is set to production, try to re-build static content

php bin/magento setup:static-content:deploy

In any cases (production or developer), clear every cached files

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush;

edited Nov 03 '21 at 21:29

TylerH

20,799
66
75
101

answered Feb 04 '19 at 11:12

Antoine Martin

618
8
21

Do you clear every cached files like mentionned in 3. also ? – Antoine Martin Feb 04 '19 at 15:30

score 0 · Answer 2 · edited Nov 03 '21 at 21:30

After updating from 2.1 to 2.3.2, I find out that my custom CSS of swatches Magento_Swatches/web/css/swatches.css content from my custom theme did not merge to styles-m.css & styles-l.css. That caused layout issues in the product detail page.

I can’t find out how to make Magento 2.3.2 merge the custom CSS file to styles-m.css & styles-l.css

So I decide create a new .less file for Magento_Swatches. I created a new file Magento_Swatches/web/css/source/_module.less in my custom theme then move all content of

Magento_Swatches/web/css/swatches.css

to

Magento_Swatches/web/css/source/_module.less

then ran the command setup:upgrade

After that, the issue was resolved and all custom CSS was merged to styles-m.css & styles-l.css

Look likes Magento 2.3.2 does not allow you to use CSS directly in the module.

Why are my styles not applying after a custom CSS file is included?

2 Answers2