我在本周的大部分时间中都在尝试找到有关如何正确创建自定义主题并扩展现有的LESS / CSS的清晰指南，而不必复制整个magento-blank主题。

官方文档提供了覆盖变量的基础知识，但是用途有限。现有的指南（例如Sonassi的指南）似乎基于Magento 2的Beta版。

来自Magento 1，在了解LESS的工作方式以及Magento如何将所有文件收集到CSS方面有一些学习过程。我花了一些时间来仔细阅读指南，并清楚地知道要修改的文件以及何时和我想分享的内容，以便将来的用户（和将来的我）可以快速开始使用LESS。 Magento 2。

magento2 theme less

— 安迪耶夫
source

注意1：这始终假设您正在扩展magento-blank。

注2：<theme-dir>是app/design/frontend/Vendor/theme/

基础知识：更改基本变量

（对于tl; dr，跳至结论）

我发现的大多数指南仅用LESS涵盖了主题化的这一步骤，因此，我将尽量保持简短。Magento 2具有一组基本变量，用于定义主题的常用方面。在这些变量中定义了颜色，字体，页面标题的样式等。

在其中，<magento-root>/lib/web/css/source/lib/variables/您会找到许多直观命名的LESS文件。在上述每一个中，您都可以找到分配给Magento 2中许多常见元素的变量的值。

要更改任何这些变量，只需在中创建一个文件<theme-dir>/web/css/source/_theme.less。例：

@newPrimary: #1980fe;
@primary__color: @newPrimary;


@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);

从技术上讲，您可以在此处放置任何CSS或LESS，它将成功地应用于您的网站（但不要这样做）。我将在稍后解释其工作原理。

添加新的CSS文件

您可以将新CSS添加到所有模板页面的头部。

创建<theme-dir>/Magento_Theme/layout/default_head_blocks.xml：

<?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <head>
            <css src="css/myStyle.css" />
        </head>
    </page>

然后，使用新的CSS或LESS创建文件：

<theme-dir>/web/css/myStyle.less。您可以在此处编写LESS或CSS。

覆盖现有样式

我发现仅通过添加新的CSS文件就不容易取代Magento 2 LESS。这就是我开始迷路的地方，我将说明Magento 2如何找到其LESS文件。

默认情况下，Magento 2将包括（并最终退回到）以下文件：

<Magento_Blank_theme_dir>/web/css/styles-m.less //Mobile Styles
<Magento_Blank_theme_dir>/web/css/styles-l.less //Desktop enhancements
<Magento_Blank_theme_dir>/web/css/print.less //Print Styles

这些文件包括（导入）其他LESS文件，这些文件通常包括更多的LESS文件。这是其他指南对我无济于事的地方，我将尽我所能解释我的发现。

源码/库魔术

在中styles-m.less，有以下行：@import 'source/lib/_responsive.less';。您会注意到主题中没有source/lib目录magento-blank。很明显，Magento 2样式最终回落到<magento-root>/lib/web/css/。在那找到source/lib/_responsive.less。

_theme.less由于source/lib在magento-blank主题中导入了文件，因此您使用的变量可用。注意： _theme.less默认主题中为空文件。继续阅读以了解为什么要注意这一点。

“自动包含” LESS文件

我发现一些指南坚持要求您可以创建，<theme-dir>/web/css/_styles.less因为Magento会自动查找并包含该文件。我发现这是个坏建议。

如果创建<theme-dir>/web/css/_styles.less，则您的站点将中断。theme-frontend-blank/web/css/styles-m.lessimport _styles.less，依次导入3个.less文件，每个文件都导入更多.less文件。

如果创建_styles.less，则您将覆盖它。通过覆盖_styles.less，您将覆盖它导入的所有文件以及这些文件导入的所有文件，依此类推。

关于的注意事项_theme.less：该文件在默认主题中为空，因此如果您将主题作为默认主题，则可以简单地创建并开始添加。但是，如果要扩展已经扩展了默认设置的主题，_theme.less则已经使用了机会。再次创建它将覆盖它。

神奇的@magento_import

在其中，styles-m.less您会看到一些注释掉的行：

//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets

这些行实际上没有注释掉！Magento 2对以开头的行有特殊处理//@magento_import。这些行只能包含在中的文件中<theme-dir>/web/css。

上面的几行指示Magento 2在主题内遵循给定模式的任何文件。因此，以上几行将自动包含：

'<theme-dir>/Magento_Catalog/web/css/source/_widgets.less';
'<theme-dir>/Magento_Catalog/web/css/source/_module.less';

'<theme-dir>/Magento_Cms/web/css/source/_widgets.less';
'<theme-dir>/Magento_Cms/web/css/source/_module.less';

'<theme-dir>/Magento_Reports/web/css/source/_widgets.less';
'<theme-dir>/Magento_Reports/web/css/source/_module.less';
...and so on

添加文件名_widgets.less，并_module.less 会自动发现和收录，即使它的一个新的模块，或者还没有该文件的模块。

请注意，Magento-Blank包含了大多数模块的那些文件，并且如果您想使用此方法，则需要复制粘贴原始文件（除非您要进行完全重写）。

结论

（阅读：请勿使用_styles.less）。

当您想要更改元素的CSS时，您要尽力而为，以找到定义该样式的文件。有时，您要做的就是在中更改变量_theme.less。我怀疑大多数时候，您只需要复制_module.less或粘贴_widgets.less到主题中并进行更改即可。

如果您创建了一个新模块或具有新的HTML元素，则可能需要创建一个LESS文件，并将其分别包含在<head>每个页面的中。

在复杂的情况下，您可能需要创建一个新的@import或@magento_import。您想找到最适合自己所从事工作的子级，因此您无需复制粘贴一堆不必要的文件，也不添加@import看起来似乎无济于事的混乱行。

— 安迪耶夫
source

做得好，我也同意，在构建自己的元素时，最好在头中包含一个单独的CSS文件（前提是未在所有页面上均加载它们）。我不喜欢将Magento主题添加到每个页面的所有样式。

— 本·克鲁克

喜欢详细的答案。请注意，如果您使用// // @ magento_import指令，那么就不可能使用少了第三方的编译器，例如gulp中包含的那些，我们中许多人正在这样做以提高速度。

— 罗伯特·埃金顿

很好的解释！数以百万计的感谢。我使用的是Magento 2.1.0，必须删除var/view_preprocessed/css/frontend/VENDOR/THEME/loca_LE/css/*才能重新生成CSS

— AlexandruBangală16

嘿! 我尝试将针对_extends.less的新类的新代码添加到app / design / frontend / Vendor / theme / css / source中。但这行不通。请帮助magento.stackexchange.com/questions/151940/…–

— Sylon

请metnion_extend.less

— 杰拉德

如何在自定义主题中覆盖LESS？