I want to change the background color of a certain button in the customer area. It is the "Compare Product" Button at the left sidebar.

How do I know which .less file I have to change?

The selector is .actions-toolbar .primary

<div class="actions-toolbar">
    <div class="primary">
        <a data-bind="attr: {'href': compareProducts().listUrl}" class="action compare primary" href="foo"><span>Vergleichen</span></a>
    </div>
    <div class="secondary">
        <a id="compare-clear-all" href="#" class="action clear" data-post="bar">
            <span>Alles löschen</span>
        </a>
    </div>
</div>

Normally I would just override styles-l.css or styles-m.css and make my change. But I heard that these files are generated by .less files, so this would be stupid.

I want to change the background color of a certain button in the customer area. It is the "Compare Product" Button at the left sidebar.

How do I know which .less file I have to change?

The selector is .actions-toolbar .primary

<div class="actions-toolbar">
    <div class="primary">
        <a data-bind="attr: {'href': compareProducts().listUrl}" class="action compare primary" href="foo"><span>Vergleichen</span></a>
    </div>
    <div class="secondary">
        <a id="compare-clear-all" href="#" class="action clear" data-post="bar">
            <span>Alles löschen</span>
        </a>
    </div>
</div>

Normally I would just override styles-l.css or styles-m.css and make my change. But I've read that these files are generated by .less files, so this would be stupid.