_module.less和_extend.less之间的区别


22

使用_module.less和扩展主题之间有什么区别_extend.less?扩展模块/主题的最佳实践是什么?

我首先想到的是,_module.less在设计新模块的样式以及_extend.less扩展模块时最好使用。但是Luma _module.less在扩展空白主题时会使用,以使理论脱颖而出。

我看到的它们之间的唯一区别_module.less是在响应库之前导入,以及_theme.less_extend.less它们之后导入的位置。

这是它们导入的顺序 vendor/magento/theme-frontend-blank/web/css/styles-l.less

//
//  Blank theme desktop styles
//  _____________________________________________

//  These desktop styles are added to mobile

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

@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: 'desktop'; // Sets target device for this file
@media-common: false; // Sets not to output common styles

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

@import 'source/_theme.less';

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

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

Answers:


20

答案在Magento文档中有些隐藏:

如果您对父主题具有的所有功能都满意,但又想添加更多样式,则使用_extend.less扩展主题是最简单的选择。

在这里阅读更多

使用_module.less当你想为一个模块,并使用风格发生重大变化_extend.less了细微的调整。您可以在上面的链接中找到有关如何覆盖组件样式的更多示例。


1
我读过,但并没有真正解释原因,听起来好像没有任何根据。我试图找出是否有任何区别。我一直在使用_extend.less进行所有更改,因为我更喜欢一致性而不是使用某些东西,因为“ Magento这么说”。
本·克鲁克

1
@BenCrook,如果这几天我的阅读对我有用,不是。如果有人要.less在其主题中添加与父主题/模块中的文件具有相同路径的任何文件,则将被覆盖。您可以通过在主题中创建一个空白的_module.less并查看原始样式是否适用来进行验证。
达伦·费尔顿

1
在之后php bin/magento setup:static-content:deploy,您可以查看pub/static/frontend/<vendor>/<themeName>/<locale>/css/pub/static/frontend/<vendor>/<themeName>/<locale>/<Module_Name>/css/并且将存在* .less文件的符号链接,这些链接指向您的主题或其来源的模块/父主题。
达伦·费尔顿

1
正确的是_module.less覆盖了更少的父文件,没有继承或合并。我意识到我可以在原始答案中更清楚地表明这一点:)
c.norin

1
@MattCosentino我知道此回复来得很晚,但是如果有人偶然发现它,我将在这里保留:请注意_extends.less和_extend.less之间的区别。_extend.less文件可以添加到任何模块上下文中,以从父主题扩展样式。_extends.less位于主题的根目录中,用于扩展现有的实用程序(请参阅<project> /lib/web/css/docs/source/_utilities.less)。
c.norin

3

简单的解释或两者之间的区别:

_extend.less是扩展/修改父主题样式的方法,例如您对父主题Luma感到满意,而只想更改自定义主题中的按钮样式,那么您要做的就是在自定义主题_buttons_extend.less下创建一个新文件,web/css/source然后在那里调整样式。通过将其添加到_extend.less主题目录内的文件中来注册该文件。

如果要扩展模块样式(例如,签出模块)怎么办,那么可以_extend.less在主题模块文件夹(例如)中创建文件,然后在其中Magento_Checkout/web/css/source/_extend.less添加/扩展模块样式。

现在,如果我_module.less在模块目录中添加了文件,则Magento_Checkout/web/css/source/_module.less打算覆盖此模块的父主题样式,在这种情况下,我需要_module.less从父主题的模块目录中复制' '文件,并对该文件进行修改,在这种情况下,该文件将_module.less完全替换父主题文件。


他从来没有谈论过Luma作为父母。
Ezequiel Alba

1

_extends.less与空白主题内结束一个S,是他们创造的一切,可以通过扩展的类文件LESS后主题范围内,无需风格的变化创造新的组件或模块结构。->对于那些不相信我的人:https : //github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.less请检查文件。

最后_extend.less没有S的是,当您对父主题具有99%的满意度时,您只需要更改几件事,更改某些样式即可。

我个人认为,关于后者,请不要将其用于自己的开发中。稍后会造成大麻烦。使您_module.less要定制的每个模块的模块保持模块化,最后您将获得更好的结果和可维护的项目。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.