1

I can add a custom CSS file by adding this to Magento_Theme/layout/default.xml:

<head>
    <css src="css/local.css" />
</head>

However, it is still loaded before /pub/media/styles.css -- how do I get this file to load AFTER styles.css?

1

Unfortunately not possible with default functionality. You need to build a module for that behaviour.

I'm using this https://github.com/quickshiftin/mage2-ordered-assets module which works out of the box:

<css src=".." order="20"/> 
  • I tried installing this module, and even though it does change the order of local.css, it is still loading before /pub/media/styles.css (the link tag immediately above <meta property="og:type" content="og:product" />). I realized I'm asking the wrong question -- the question I should be asking is how to remove styles.css. However, I will leave this question up for informational purposes. – thdoan Jul 12 '16 at 9:08
  • It is in default support by Magento. You don't need this extension for it. this order tags works flawlessly without any module installation – Shahzaib Hayat Khan Nov 8 '17 at 17:29
1

It turns out /pub/media/styles.css is a file that contains only styles for the Luma homepage promo blocks, so if you have your own homepage design then you can safely remove it entirely by going to Admin / Stores / Configuration / General / Design / HTML Head and removing the link tag from the Miscellaneous Scripts field.

CSS files are not even supposed to be placed in the Miscellaneous Scripts field, as it's really meant for JavaScript files (you can tell by how styles.css is placed below the rest of the JS files). If you want to create a stylesheet that is only loaded on the homepage, then it's better to put your styles in a file called something like home.css and add it to only the homepage by overriding the cms_index_index.xml layout file.

Credit for locating styles.css: Gordova's answer to this question.

0

You can include all your code into the built in less functionality in the theme you have created. Make a file at: web/css/source/_extend.less and place your css code there. You don't have to write less in these files, you can write vanilla css and will work just fine.

This file will be automatically and complied with the rest of the less files on the site and your code will be the last in the compilation process giving you CSS Specificity. The two files that get generated are /pub/static/frontend/{{vender_name}}/{{your_theme}}/en_US/css/styles-l.css and /pub/static/frontend/{{vender_name}}/{{your_theme}}/en_US/css/styles-l.css. These are the primary styles for the whole build. More info about that process

For a decent work flow, you are going to have to pick the way that works best for you. If you are doing a lot of editing with a lot of css, you might want to get Grunt up and running. If you just have a little bit of work to do, client side compilation might be the best bet. Read Here for more information on setting that up.

  • Thanks for the input. Your solution is correct in that the CSS in _extend.less gets compiled into styles-m.css, however my current solution is already loading local.css after styles-m.css. I need a solution to load styles after styles.css, not styles-m.css. – thdoan Jul 12 '16 at 2:33

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.