0

I have a custom theme that inherits from Magento/blank. I want to add a custom .css file to this theme. To do so, I've followed the Magento documentation that explains the steps: Include CSS

Note that my Magento instance is in a developer mode

In my current state, the filesystem path to my custom css file is:

app/design/frontend/<Vendor>/<my-theme>/web/css/custom-style.css

I've created the default_head_blocks.xml file at:

app/design/frontend/<Vendor>/<my-theme>/Magento_Theme/layout/default_head_blocks.xml

With the following content:

<?xml version="1.0"?>
<page
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <head>
    <!-- Custom CSS -->
    <css src="css/custom-style.css" src_type="url" rel="stylesheet" type="text/css" />
  </head>
</page>

Nothing more here than what the docs says to do

Adding the <css> node to the .xml file is working properly: there is a <link> node in the resulting source code of my page

<link rel="stylesheet" type="text/css" rel="stylesheet" type="text/css" href="css/custom-style.css" />

My issue is that the loading of this file fails with a "(canceled)" Status when checking it in the Chrome Network tab:

Chrome Network Tab error

Note how the path of my custom file is different than the one for other successfully loaded files.

My file is looked up at

/css/custom-style.css

whereas the standard theme files are looked up at

/pub/static/versionXYZ/frontend/<Vendor>/<my-theme>/en_US/css/<file-name>

I would suppose that this explains why the loading fails (accessing this path directly with the browser yields a 404 Not Found).

What I tried

  • Removing pub/static/* content (keeping the .htaccess file, of course)
  • Removing var/view_preprocessed/* content
  • Cleaning the cache with cache:clean, and flushing it with cache:flush
  • Running the Grunt exec:<my-theme> task along with the less:<my-theme> task

I did not run setup:static-content:deploy and I shouldn't have to, since I'm in developer mode

Any help appreciated! Thanks!

1

1 Answer 1

0

Please try below code replace default_head_blocks.xml

<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/custom-style.css" /> 
    </head>
</page>

and after that please please run below commands

php bin/magento c:c

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy -f

php bin/magento setup:di:compile

Hope it works!

2
  • Awesome! That worked really well! The culprit was the src_type="url" property. Removing just this property made the CSS load properly. Thanks a bunch!
    – Tazaf
    May 15, 2020 at 11:04
  • welcome bro please accept answer too if useful May 15, 2020 at 11:35

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.