0

I'm still having issues with adding some custom .css file to my custom theme in Magento 2.2.2

I have followed the known steps like: (I'm using the Claue theme)

  1. Put magento in developer mode
  2. In this file: app/design/frontend/Mgs/claue/Magento_Theme/layout/default.xml I've added this line: <css src="css/file_custom.css"/>
  3. I've created the file_custom.css in: app/design/frontend/Mgs/claue/web/css
  4. When I deploy the files the css file is generated in: pub/static/frontend/Mgs/claue/nl_NL/css as "file_custom.min.css".

But I can't get it to load... What am I doing wrong? Do I need to deploy the files in the first place when I'm in developer mode? I think I don't :) But how can I get Magento to load the file so I can add some custom styling?

Regards, Robert

Improve this question

2 Answers 2

Reset to default
0

Into Magento_Theme/layout, create a new file default_head_blocks.xml with the following code:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/file_custom.min.css" media="print" />
    </head>
</page>

Then use php bin/magento setup:static-content:deploy

Improve this answer
3
  • Ah i see, so creating the extra .xml file does the trick, I thought that the default.xml did the same... The file is now loaded on the frontend. When I add code to the css file in app/design/frontend/Mgs/claue/web/css do I have to deploy every time?
    – n00bly
    Commented Feb 16, 2018 at 12:42
  • php bin/magento cache:clean make sure to disable the browsing cache! it messes the output sometimes!
    – George Geo
    Commented Feb 16, 2018 at 12:54
  • That doesn't work for me, the file in: pub/static/frontend/Mgs/claue/nl_NL/css, still remains empty...
    – n00bly
    Commented Feb 16, 2018 at 13:00
0

1) Go to app/design/frontend/Mgs/claue/Magento_Theme/layout/default_head_blocks.xml and add this:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
    <head>
        <css src="css/custom.css" />
    </head>
</page>

NB: this custom css will be loaded in all pages.

2) add your css file in app/design/frontend/Mgs/claue/web/css/custom.css

3) clean cache : php bin/magento cache:flush php bin/magento cache:clean

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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