Why does gallery.less include _theme.less?

Question

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.

Answer 1

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.

Answer 2

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.