最好的扩展模块的最佳方法,如_minicart.less?


15

那么<module>/web/css/source/module/,例如,哪一种是扩展较少文件内容的最佳方法Magento_Checkout/web/css/source/module/_minicart.less

假设

A)超越

  1. 少相关的主题,您必须创建(或复制)具有与父主题相同名称的少主题,并像这样将其放入您的主题中theme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less
  2. 特定于模块的内容,您必须创建(或复制)与父主题名称相同的内容,然后将其放在您的主题中,如下所示theme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less
  3. UI lib less,您必须在库文件夹中创建(或复制)具有相同名称内容的less,然后将其放在您的主题中,如下所示magento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less

B)延伸

  1. 与主题相关的较少,您必须在主题中创建一个_extend.less文件,并在名称中添加_extend这样的名称<your-theme>/web/css/source/_navigation_extend.less才能扩展并在_extend.less中theme-frontend-blank/web/css/source/_navigation.less使用@import指令注册该文件,而无需在web / css / source->中添加主题内容@import "_navigation_extend.less"
  2. 具体来说,您必须在主题模块路径中创建_extend.less文件,这样<your-theme>Magento_CatalogSearch/web/css/source/_extend.less才能扩展Magento_CatalogSearch原始_module.less
  3. UI lib less,您必须在库文件夹中创建具有相同名称内容的less,在此名称中添加_extend<your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.less以扩展并在_extend中magento2-base/lib/web/css/source/lib/_buttons.less使用@import指令注册该文件,并在web / css / source中删除主题内容- >@import "lib/_buttons_extend.less"

理论上必须建议您创建一个_minicart_extend.less,但它不会自动运行。也许您应该像B1或B3所述将文件导入_extend.less而不是该模块中?

如果这是扩展它们的正确方法,但为什么必须将这些扩展较少的组件自动包含在css的解析中,而又必须将其导入_extend.less中呢?

(这里还有另一个问题:web/css/source/lib/_buttons.less和之间有什么区别web/css/source/_buttons.less?)

我有点困惑。希望有人可以帮助我。

抱歉,这篇长篇文章。


资料来源:

Answers:


13

根据Magento 2约定,扩展模块样式的最佳方法如下:

如果要扩展样式,Magento_Checkout/web/css/source/module/_minicart.less我们需要2个文件

  • <your-theme>/Magento_Checkout/web/css/source/_extend.less我们将在其中导入我们的自定义扩展名。在这种情况下@import "_minicart_extend.less"

  • <your-theme>/Magento_Checkout/web/css/source/_minicart_extend.less 其中将包含我们的自定义样式。

我们需要一个_extend.less文件来指定的@imports原因是因为Magento仅自动包含_extend.less每个模块。*_extend.less自动检查和添加所有内容非常耗时,这就是为什么它不是那样实现的原因。

在Magento中,负责微型车的空白主题文件位于 /vendor/magento/theme-frontend-blank/Magento_Checkout/

我们还可以将所有自定义样式直接添加到中_extend.less。但是,将它们分成较小的特定文件(如原始模块中的文件)可以使代码清晰明了,并且组织得更好。根据Magento 2标准,这也是推荐的方法。


谢谢@Jalogut!因此,我也可以将“ _minicart_extend.less”称为“ foobar.less”,这没有什么区别,因为在_extend.less中@import才是最重要的。在组件名称中添加“ _extendd.less”只是为了帮助您使所有内容更加清晰?
洛雷纳(Loreena)

就是这样。
Jalogut

@Jalogut您确定他们会说“自动检查并添加所有* _extend.less会很耗时”吗?还是您的猜测?因为IMO确信,使开发人员每次想要自定义时都需要这样做,但要花的时间不多(首先要加上一点混乱)
medmek

“我们之所以需要_extend.less文件来指定@imports的原因是,Magento每个模块仅自动包含一个_extend.less文件。” 我想您想说的是,每个模块都有一个_extend.less,并且最后将它们合并到一个大的_extend.less文件中
Black

“我们也可以将所有自定义样式直接添加到_extend.less中。”那是个坏主意,因为“ grunt watch”不会侦听此文件中的更改。仅将其用于导入,并grunt refresh在更改此文件后始终调用。
黑色
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.