Magento – Magento 2.2.4 : Missing media/styles.css from Sample Data site

cssluma-thememagento2

Everything seems fine apart from the banner section which appears on various pages which looks like…

enter image description here

I can see that some styles are available in the install at <install_dir>/pub/media/styles.css but this file isn't included in the generated markup so it's not calling a 404.

Best Answer

Explaination :

This can happen when you have sample data deployed and if you use git to retrieve your website to another environment.

The file pub/media/styles.css is excluded from your git repository by default (see line /pub/media/*.* of your .gitignore). This is why you can't see this file at all when pulling the repository.

When deploying static content, this file won't be generated as this is not a classic static file.

This file is only generated when deploying the sample data :

  • Magento_ThemeSampleData module will add the content of the file vendor/magento/module-cms-sample-data/fixtures/styles.css to the file pub/media/styles.css

  • Magento_CmsSampleData module will add the content of the file vendor/magento/module-theme-sample-data/fixtures/styles.css to the file pub/media/styles.css

(see Setup/Installer.php file of each modules for more details).

Solution :

For your tests using sample data, you can add the content of the pub/media/styles.css to your Design Configuration :

  • Content > Design > Configuration
  • Click on Edit on your theme
  • HTML Head > Scripts and Style Sheets
  • Remove the line including the styles.css file
  • Add the content of what was in the file inside a <style> tag.

To know what was in the pub/media/styles.css (as it is missing now), check the fixture files mentioned in the first part, so you can retrieve the CSS code corresponding to your actual version.

Note : This method shouldn't be used in an actual production website, but as sample data are mainly used for testing and development purpose, this shouldn't be a problem you can get in production.

Solution 2 :

You could also add a line into your .gitignore file to add the file to your repository.

But again, such a specific case (using sample data) should not be added into a production website and its use should be restricted to your testing environments using sample data.

Here would be the line to add (after /pub/media/*.*) :

!/pub/media/styles.css
Related Topic