6

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.

1
  • Did you find a solution ? I am facing the same issue. – Franck Garnier May 30 '17 at 9:11
5

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.

1
  • I think you did correctly by remove custom css rules from _theme.less. Thank for your answer. – Franck Garnier May 31 '17 at 8:29
0

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.

0

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.