Magento Question posted in
The official documentation can be found here.

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

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.

Tags:

2

Answers


  1. 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 :

    1. Check if you are using dev mode With command line
    php bin/magento deploy:mode:show
    1. If developer mode is set to production, try to re-build static content
    php bin/magento setup:static-content:deploy
    1. 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;
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search