I have a theme that extends luma using _theme.less. On product pages, another CSS file is included in addition to styles-m. The problem is that they both @import _theme.less which results in duplicate CSS rules.

This will mess up any background images because they are included using relative paths.
With styles-m.css the path to images is: "../images/image.svg"
but gallery.css is in another subfolder so the path would have to be: "../../images/image.svg"

I am probably missing something here.

  • Did you find a solution ? I am facing the same issue. May 30, 2017 at 9:11

2 Answers 2


I solved my issue by moving all the theme rules from _theme.less into _extend.less. My _theme.less now only contains color definitions and some overrides of certain rules from luma.

I'm not sure if it is the correct way but it works as expected: There are no more duplicated rules and I didn't have to change anything in the gallery.less.

At first I wasn't sure because Magento docs said _extend is for small modifications, but I didn't find any better way.

  • I think you did correctly by remove custom css rules from _theme.less. Thank for your answer. May 31, 2017 at 8:29

I just found a workaround.

Override the gallery.less file in your theme. app/design/frontend/Vendor/Theme/web/mage/gallery/gallery.less

Then modify the baseDir like that :

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

@import 'module/_variables.less'; //Default gallery variables

@baseDir: "../../"; // Base directory path
@import '../../css/source/lib/_lib.less'; // Global lib
@import '../../css/source/_theme.less'; // Theme overrides
@import '../../css/source/_variables.less'; // Local theme variables
@baseDir: "../../"; // Base directory path
@import '../../css/source/lib/_responsive.less';
@import 'module/_mixins.less'; //Mixins in gallery
@import 'module/_extends.less';
@import 'module/_focus.less';
@import 'module/_fullscreen.less';

Then it should works.

The theme css is still duplicated but the baseDir is correct now. You can overwride it in order not import _theme.less

We may not include the custom css in _theme.less but maybe only variable definition.


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.