0

I have created a theme in which i have extended luma theme. Now in my new theme I want to add some custom css to overwrite some default css classes for that I added _extend.less inside

test/luma/web/css/source.

Inside _extend.less i added some classes like

.logo {  display:none; }

I haven't added styles-l.less and styles-m.less inside my theme and default_head_block.xml.

Now when I run commands

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

and then after cleaning cache

php bin/magento cache:clean

my rules are not implemented and default css breaking too.

Please suggest me the solution..

0

1) Go to app/design/frontend/text/luma/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>

2) add your css file in app/design/frontend/test/luma/web/css/custom.css

3) clean cache : php bin/magento cache:flush php bin/magento cache:clean

Edit: If you want to extend css from a parent theme, you have to create _extend.less in web/css/source

Now to add you changes on it, you create the file less that you want to change it for exemple : _navigation_extend.less, you add you changes then you declare it in _extend.lesslike this: @import '_navigation_extend.less';

for more informations, check this Magento DevDocs.

  • it there any way to extend styles-l and styels-m because if i add css using this way then my css will be above than magento css and it will overwrite my rules – Karan Adhikari Feb 15 '18 at 13:48
  • Please, Look my update – PЯINCƏ Feb 15 '18 at 14:05
  • I tried this i added _extend.less and then added a class like .logo{display:none;} but it doesn't affect anything. I deployed static content as well. but still there was no change. m i missing something ? – Karan Adhikari Feb 15 '18 at 16:12
0

The reason your styles are not showing up is because you aren't clearing the var/view_preprocessed folder when you recompile. The var/view_preprocessed is a cached version of the front end files that Magento will draw from when the files in the pub are not there. So it can be a little maddening and counter intuitive when updating styles on a site.

You have the correct files in the correct places, but when you make a change in you less files you only have to remove the style files in pub/static folder, clear var/view_preprocessed, remove the cache with php bin/magento cache:clean and then reload the page. There is no need to run php bin/magento setup:upgrade, that only needs to be run when you are updating the version of a module. It removes some directories and so might seem like it's working for you, but it's a waste of time for changing css.

  • Ok i have created a new theme which is child of luma theme. i have created theme.xml and registration.php now inside web/css/source folder. I have created _extend.less then inside that file i have written a css rule like. .logo{ display: none} after running upgrade command and deployed static content that rule still not coming. i cleared var/view_preprocessed folder before running those commands. did i do something wrong – Karan Adhikari Feb 15 '18 at 16:43
  • no, those are the correct steps. Like i said, you don't have to run the upgrade command. I can't think of anything for sure that would be an error. I'm assuming you have set the theme in the admin? – circlesix Feb 15 '18 at 18:50
  • Yes I have set that theme from admin and I have enabled developer mode too. When I import my custom less in _theme.less and then deploy the static content it gives me some variable error in style-l.less and I haven't included styles-l in my new theme. – Karan Adhikari Feb 16 '18 at 3:35
  • what is the error? These files in the pub folder are compiled from all the less in Magento. So it could be an error in another file, or something in your file that just isn't playing nice (like a missing semicolon or closing bracket). – circlesix Feb 16 '18 at 15:49

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.