Questions tagged «less»

我在本周的大部分时间中都在尝试找到有关如何正确创建自定义主题并扩展现有的LESS / CSS的清晰指南，而不必复制整个magento-blank主题。 官方文档提供了覆盖变量的基础知识，但是用途有限。现有的指南（例如Sonassi的指南）似乎基于Magento 2的Beta版。 来自Magento 1，在了解LESS的工作方式以及Magento如何将所有文件收集到CSS方面有一些学习过程。我花了一些时间来仔细阅读指南，并清楚地知道要修改的文件以及何时和我想分享的内容，以便将来的用户（和将来的我）可以快速开始使用LESS。 Magento 2。

34 magento2  theme  less 

使用_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'; …

22 magento2  frontend  view  less-css  less 

那么<module>/web/css/source/module/，例如，哪一种是扩展较少文件内容的最佳方法Magento_Checkout/web/css/source/module/_minicart.less？ 假设 A）超越 少相关的主题，您必须创建（或复制）具有与父主题相同名称的少主题，并像这样将其放入您的主题中theme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less 特定于模块的内容，您必须创建（或复制）与父主题名称相同的内容，然后将其放在您的主题中，如下所示theme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less UI lib less，您必须在库文件夹中创建（或复制）具有相同名称内容的less，然后将其放在您的主题中，如下所示magento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less 并 B）延伸 与主题相关的较少，您必须在主题中创建一个_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" 具体来说，您必须在主题模块路径中创建_extend.less文件，这样<your-theme>Magento_CatalogSearch/web/css/source/_extend.less才能扩展Magento_CatalogSearch原始_module.less 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？） 我有点困惑。希望有人可以帮助我。 抱歉，这篇长篇文章。 资料来源： http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html http://inchoo.net/magento-2/working-with-css-in-your-first-magento-2-project/comment-page-1/#comment-434125

15 magento-2.1  less  extend 

在Magento 2 lib文档中，它包含以下内容： @ media-common：true | false-设置是否输出通用样式。对于常用样式，每次您要添加一些样式时都应使用 & when (@media-common = true) { your styles } 题 使用此代码和只写Less而没有它有什么区别？如： & when (@media-common = true) { body { background: blue; } } 如何将其编译为： body { background: blue; } 它将不会以styles-l.css和styles-m.css输出吗？

12 magento2  less-css  less  static-content 

我想覆盖lib/web/mage/gallery/gallery.less和一些模块文件 lib / web / mage / gallery / module / *。less 我需要覆盖它们，因为我想更改产品图库图像的样式。 如何覆盖或是否有其他方法“解决问题”？

10 magento2  magento-2.1  overrides  less  gallery 

从Magento 2中的空白主题继承时，您将如何覆盖自定义主题的导航样式？ 我的theme.css文件app/design/frontend/<Vendor>/<theme>/web/css夹中有一个文件，但是我知道Magento 2使用LESS。我可以轻松地覆盖样式theme.css表中的样式，但是我不想一直使用!important。 另外，我使用的是Bootstrap 3，我假设空白主题的样式将覆盖Bootstrap中匹配的所有样式指令。解决此问题的最佳方法是什么？

10 magento2  overrides  css  less 

通过查看全新安装的Magento 2（v2.1.8），我从他们的Gruntfile.js和package.json文件中看到Magento正在使用grunt-autoprefixer 太好了，CSS自动前缀确实很有用。但是我看不到如何在Magento的Gruntfile中使用它，有人知道它是如何工作的吗？ 此外，这在实际环境中的生产模式下将如何工作？Magento2不在生产模式下使用PHP LESS编译器，而Grunt仅用于进行开发。 Gruntfile.js /** * Production preparation task. */ prod: function (component) { var tasks = [ 'less', 'autoprefixer', 'cssmin', 'usebanner' ] package.json "devDependencies": { "glob": "^5.0.14", "grunt": "^0.4.5", "grunt-autoprefixer": "^2.0.0", 我跑了grunt autoprefixer，它似乎也不起作用。 $ grunt autoprefixer Running "autoprefixer:setup" (autoprefixer) task Autoprefixer's process() method is deprecated and will …

9 magento2  less  grunt  less-compilation