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

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

  • 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 Feb 16 '18 at 12:42
  • php bin/magento cache:clean make sure to disable the browsing cache! it messes the output sometimes! – George Geo Feb 16 '18 at 12:54
  • That doesn't work for me, the file in: pub/static/frontend/Mgs/claue/nl_NL/css, still remains empty... – n00bly Feb 16 '18 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

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.