Magento 2: How to override theme LESS styles within custom module

Question

I am running Magento 2.3 on Ubuntu 18.04 server with Apache 2.4, MariaDB and PHP 7.2. Magento is running in developer mode.

I have created a custom theme which inherits from the Magento/blank theme.

I have also created a module, which should override the theme's style and apply a background image to the header.

I have created a basic module according to Magento's documentation. Styles are contained within the module's _module.less file which are intended to override the backgroundproperty which was set within my custom theme.

Once I upload the module and issue the commands php bin/magento cache:flush, php bin/magento setup:upgrade and then php bin/magento module:status, I can see that my module has been successfully registered and enabled.

When I inspect the source of my website using my web browser's code inspector, I can see that the value I assigned is not compiled into the CSS files.

My initial thought was that I had bad syntax in my _module.less file, but I don't see any compilation errors, so I assume that either the _module.less file is never acknowledged during compilation, or that my theme's styles are prioritised over those of the module.

The [module_author]/[module_name]/view/frontend/web/css/source/_module.less file contains the following code:

// /**
//  * Copyright © Joshua Flood. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Variables
//  _____________________________________________

@header__background-image:  "../../images/header-background-image.png";
@header__background-color:  #EEF;
@header__background:        @header__background-image,
                            @header__background-color;

//
//  Common
//  _____________________________________________

& when (@media-common = true) {

    //
    //  Header
    //  ---------------------------------------------

    .page-header {
        .lib-css(background, @header__background);
    }
}

The obvious solution to this problem would be to ensure that the syntax is correct and then to ensure that the module styles properly override the theme styles.

I would be happy, however, if someone could explain to me how I would go about integrating the background styling into my existing theme, but create a file upload form on the backend which would allow the admin user to replace the background image, although I'm not sure that this can be done without implementing a separate module.

Answer 1

You can add your changes in _theme.less file in your new theme. Make sure your theme have parent Magento/blank define in theme.xml file

path

[yourtheme]/web/css/source/_theme.less

_module.less is intends for add customises for individual module by add your changes inside theme instead code

Example

[yourtheme]/Magento_Catalog/web/css/source/_module.less

Answer 2

To override the visual element of the theme, you must extend a theme.

The module is to override the functions and style the element around that module, overriding styles are not modules primary task.

With an extended theme, you can override the styles, classes, and templates.

Answer 3

After researching further, I have discovered that it is not possible.

Theme styles take priority and will always override module styles where there is a conflict.

As per Anthony's comment, if a parameter value is appended with !important, then the style may be successfully rendered. This will not work when using .lib-css() and so it should not be treated as a solution.

As per the answer provided by mrtuvn, styles defined within an inherited theme can be overriden (inheritance is defined in [VendorName]/[themeName]/theme.xml) by specifying the overrides within [VendorName]/[themeName]/web/css/source/_theme.less.