I have written a custom module that is located in the /app/code folder. My less file is located in /app/code/<Vendor>/<Module>/view/frontend/web/css/source/_module.less. How do I include the theme's _variables.less file so I can pre-style my content to match the theme's colours? I'm only after the header and button colours (example code below):

.mydiv {
    border-top: 1px solid @top-header;
    border-bottom: 1px solid @top-header;
input[type="button"] {
    background-color: @button_primary;
    color: @button-primary__hover__color;

I've tried to use the @import commands but this does not work:

@import 'source/_variables.less';
@import 'source/_theme.less';

1 Answer 1


I think you need to create a custom variables file and import it in a _module.less.

Please follow the step for that.

Step 1: add _module.less file.

Path : /app/code/VendorName/ModuleName/view/frontend/web/css/source/_module.less

Add the bello code in your _module.less

//  Variables
//  _____________________________________________

@baseDir: "../"; // Base directory path

@import 'variables/_custom-variables.less';

.test {
    color: @color-black_dark;

Step 2: create _custom-variables.less on the following path.

Path : /app/code/VendorName/ModuleName/view/frontend/web/css/source/variables/_custom-variables.less

@color-blue-dodger: #008bdb;
@color-black_dark: #333333;

@color-white: #fff;
@color-black: #000;

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.