{ Hello Magento 2 }

解决 Magento 2 应用问题，更注重深度挖掘。(ง •̀_•́)ง

0%

Magento 2 Less extend and override

发表于 分类于

Less fallback

在 Magento 2 如何引入 CSS 文章中说到 Magento 的 CSS 是如何组织的。在 blank 主题中，通过观察其default_head_blocks.xml文件，可以发现两个重要的 CSS 引入。

1
2
<css src="css/styles-m.css" />
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>

根据 CSS 的预处理机制，我们可以知道这两个 CSS 是由<theme-frontend-blank>/web/css下的style-l.less和style-m.less解析得到的。

以style-m为例，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//
//  Blank theme mobile styles
//  _____________________________________________

//  These mobile styles are mandatory and will be used as basis according to the mobile first design

//
//  Global lib + theme styles + theme extends
//  ---------------------------------------------

@import 'source/_reset.less';
@import '_styles.less';
@import (reference) 'source/_extends.less';

//
//  Magento Import instructions
//  ---------------------------------------------

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

//
//  Media queries collector
//  ---------------------------------------------

@import 'source/lib/_responsive.less';

@media-target: 'mobile'; // Sets target device for this file

//
//  Global variables override
//  ---------------------------------------------

@import 'source/_theme.less';

//
//  Extend for minor customisation
//  ---------------------------------------------

//@magento_import 'source/_extend.less';

@import 指令引入了更多的 Less 文件。这些 Less 文件大部分位于当前文件目录的source子目录下，但是@import 'source/lib/_responsive.less'; 中source/lib/_responsive.less 在当前文件目录下可找不到。这是因为 Magento 使用了 theme fallback 机制，当他在当前主题中找不到某个文件时，就会一直向上搜寻父主题的目录继续找，Less 这里最终 fallback 到了<magento-root>/lib/web/css/。

该文件中出现了一个特别的指令//@magento_import，他其实并不是被注释掉了，这是 Magento 自己的一个指令。

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

这段指令告诉 Magento 包含如下的 Less 文件。

1
2
3
4
5
6
7
8
9
'<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

可以查看参考文档第一条，获得更详细的官方解释。

上面说到 theme fallback 机制，这里讲讲博主自己的理解，不一定是正确的，如果你发现有误，欢迎批评指正。

Less 的 fallback 就是按照当前主题，父主题，<magento-root>/lib/web/css/ 的顺序，查找第一个符合位置名称的文件。举个例子，假设当前主题有web/css/styles-m.less，父主题也有web/css/styles-m.less，那么使用的就是当前主题文件，也就是当前主题 override 了父主题的文件。

如何 override 和 extend Magento UI

override

在自定义主题下新建web/css/source/_theme.less
注意，他将会覆盖父主题的web/css/source/_theme.less，所以如果你想保留父主题的一些样式，请拷贝过来。在_theme.less中可以重新定义variables。

extend

在自定义主题下新建web/css/source/_extend.less。同上，子主题会覆盖父主题。

用哪个文件只是一种约定，并非技术上的强制要求。不过大家都遵守约定，会让我们工作更高效对不？
当然你可以在_extend.less import 更多 Less 文件，比如@import '_buttons_extend.less'; @import '_navigation_extend.less';，这样的结构化命名会更清楚。

参考文档

CSS preprocessing
Simple ways to customize a theme’s styles
How do you override LESS in a custom theme?