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..

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
3
  • 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, 2018 at 13:48
  • Please, Look my update
    – PЯINCƎ
    Feb 15, 2018 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, 2018 at 16:12
0

The reason your styles are not showing up is that 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 counterintuitive when updating styles on a site.

You have the correct files in the correct places, but when you make a change in your 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.

Improve this answer
4
  • 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, 2018 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, 2018 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, 2018 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, 2018 at 15:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.