覆盖Magento 2中的空白主题样式

从Magento 2中的空白主题继承时，您将如何覆盖自定义主题的导航样式？

我的theme.css文件app/design/frontend/<Vendor>/<theme>/web/css夹中有一个文件，但是我知道Magento 2使用LESS。我可以轻松地覆盖样式theme.css表中的样式，但是我不想一直使用!important。

另外，我使用的是Bootstrap 3，我假设空白主题的样式将覆盖Bootstrap中匹配的所有样式指令。解决此问题的最佳方法是什么？

— 加雷斯·戴恩
source

Answers:

Magento建议的2种方法来覆盖或扩展父主题的样式：

1.简单的方法

延伸：

在主题目录中，创建一个web/css/source子目录。（您已经完成了这一部分）在_extend.less此处创建一个文件。

根据文档：

“当您对父主题具有的所有功能都满意但想要添加更多样式时，使用_extend.less扩展主题是最简单的选择。”

覆写：

您无需创建_extend.less文件，而是创建_theme.less文件。在这种情况下，您需要从父级复制所有需要的变量_theme.less，包括那些不会更改的变量。然后进行更改。

根据文档，缺点是：

“每当父母的_theme.less更新时，您就需要监视并手动更新文件。”

2.结构化方式

延伸：

此方法使您可以更好地组织代码。您的更改将井井有条。您无需使用单个 _extend.less文件来包含所有更改，而是可以从您要更改的Magento UI库中为每个组件创建扩展文件。

假设您要扩展按钮和导航组件的样式。在主题目录中，创建2个文件：_buttons_extend.less和_navigation_extend.less，然后在相应文件中添加对每个组件的更改。

然后创建_extend.less添加以下代码的文件：

@import '_buttons_extend.less'; 
@import '_navigation_extend.less';

覆写：

在你的主题，创建对应于要改变（UI组件的文件的副本_buttons.less，_navigation.less等），该文件将覆盖_buttons.less父主题。

重要的是要注意覆盖和扩展之间的区别。

您可以在《前端开发人员指南》中阅读更多有关覆盖和扩展的文档，也可以阅读Magento 2中有关CSS 的更多信息。

— 路易斯·加西亚
source

因此，假设我有一个Vendor_Namespace文件夹，我在其中添加了另一个名为“ web / css / source / _extend.less”的文件夹，并且web / css / source /中的_extend.less-File会知道相应文件位于何处？我是否正确理解这一点

— Max

是的，只需创建文件web/css/source/_extend.less并在其中放置样式即可。

— 路易斯·加西亚

我创建了一个_extend.less文件，并导入了_slider.less：<theme_folder> / css / source /这两个文件都在同一路径中，但是不起作用，.css生成的文件中找不到_slider.less中的所有规则，我处于开发人员模式并运行“ php magento setup：static-content：deploy”

— xzegga

您是否删除了浏览器的缓存？

— 路易斯·加西亚

我可以覆盖<theme_folder> / css / source / lib / variables吗？我如何更改一个较小文件的变量？（比如说我想覆盖@ button-background）-我需要在_buttons_extend.less中编写它，否则我可以覆盖所有lin / web / css / source / lib / variables

— Goldy

我在使用Foundation时遇到了类似的问题。这样做的官方方法是覆盖特定模块的less文件，并在那里修改css。然后，Magento将在编译期间将其拾取

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html

最终，我最终删除了Magento创建的所有默认CSS文件。我发现编写自定义CSS（尤其是使用Bootstrap这样的框架）比尝试覆盖所有各个模块要容易得多。您可以在以下位置执行此操作：

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>

— 迈克·斯坦普夫
source

提交东西的好方法。但是问题是关于“扩展”整个主题并添加更多主题。

— 米格尔·费利佩·吉伦·卡洛

不，问题在于覆盖。

— 黑色

假设您要覆盖styles-m.css，然后将其放入web/css主题中，并将其命名为custom-styles-m.css。

然后在主题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>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...

— 黑色
source