I know this question is being asked all over Magento's stack exchange, but I can't get it to work. I'm trying to add some custom css to a page, and Chrome's console is reporting 404s when trying to load the css file. Developer mode is on, I've enabled the rewrite apache module, and my apache2.conf allows symlinks:
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
Chrome's console:
GET (404) http://localhost/magento2/pub/static/version1496785793/adminhtml/Magento/backend/en_US/css/mybase.css
Here's my layout file (/MyCompany/MyModule/view/adminhtml/layout/myroute_profile_edit.xml)
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/mybase.css"/>
</head>
<body>
<referenceContainer name="content">
<block class="MyCompany\MyModule\Block\Adminhtml\Profile\Edit" name="mycompany_mymodule_profile_edit"/>
</referenceContainer>
<referenceContainer name="left">
<block class="MyCompany\MyModule\Block\Adminhtml\Profile\Edit\Tabs" name="mycompany_mymodule_profile_tabs">
<block class="MyCompany\MyModule\Block\Adminhtml\Profile\Edit\Tab\Profile" name="mycompany_mymodule_profile_edit_tab_profile"/>
<action method="addTab">
<argument name="name" xsi:type="string">profile</argument>
<argument name="block" xsi:type="string">mycompany_mymodule_profile_edit_tab_profile</argument>
</action>
<block class="MyCompany\MyModule\Block\Adminhtml\Profile\Edit\Tab\TargetProfile" name="mycompany_mymodule_profile_edit_tab_targetprofile"/>
<action method="addTab">
<argument name="name" xsi:type="string">target_profile</argument>
<argument name="block" xsi:type="string">mycompany_mymodule_profile_edit_tab_targetprofile</argument>
</action>
</block>
</referenceContainer>
</body>
</page>
I've also created 3 css files all having the exact same code: MyCompany\MyModule\web\css\mybase.css MyCompany\MyModule\view\adminhtml\web\css\myadmin.css MyCompany\MyModule\view\frontend\web\css\myfrontend.css
body {
background-color: lightblue;
}
And these are the steps I perform each time I change the css and xml files:
Go to the var directory and remove everything in cache, page_cache, di, and generation.
sudo php bin/magento setup:upgrade
sudo php bin/magento setup:di:compile
Go to pub/static and remove everything except ./.htaccess.
sudo php bin/magento setup:static-content:deploy
sudo php bin/magento indexer:reindex
sudo chown -R www-data:www-data magento2 (root magento dir)
sudo chmod -R 777 magento2
Clear caches.
I've tried putting each of the 3 css files in my myroute_profile_edit.xml.
<head>
<css src="css/mybase.css"/> or <css src="css/myadmin.css"/> or <css src="css/myfrontend.css"/>
</head>
After changing myroute_profile_edit.xml, and running the above steps, I get a 404 in Chrome's console, stating mybase.css or myadmin.css or myfrontend.css could not be found.
1 Answer 1
You need to specify the module that you are pulling the css from.
<css src="MyCompany_ MyModule::css/mybase.css"/>
If you take a look into your pub/static folder, you will most likely see that your css files are correctly getting placed in your modules folder:
pub/static/adminhtml/Magento/backend/en_US/MyCompany_ MyModule/css/mybase.css
but the xml you have is pointing to
pub/static/adminhtml/Magento/backend/en_US/css/mybase.css
which can't find the file, as it's not there.
-
1Thank you @circlesix, that worked! Thanks for answering so quickly, too.Joseph Hovik– Joseph Hovik2017年06月06日 22:49:11 +00:00Commented Jun 6, 2017 at 22:49
-
glad i was able to help!circlesix– circlesix2017年06月07日 13:22:52 +00:00Commented Jun 7, 2017 at 13:22