Magento 2-覆盖CSS而不在任何地方使用！important

10

我目前正在为客户在Magento 2网站上工作。假设我的客户的品牌是boofar，而我尝试扩展/覆盖foobar的主题是使用设置为父主题frontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

然后在下面frontend/Foobarthemes/boofar/web/css/source/_theme.less编写了要覆盖的CSS代码。我也尝试过使用_extend.less。

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

我被迫在!important这里工作。字体和文本都不能在上述代码中使用。

我是否不正确理解Magento 2前端工作流程？

magento2  theme  css  frontend  less-css 
— 弗朗西斯·金
source
原始CSS规则在哪里找到？
— 亚伦·艾伦
— Ankit Shah
1
尝试在web / css / custom.css（简单的CSS）中更新此文件，不要忘记删除var /文件夹和pub / static / content / frontend / yourtheme_package / yourtheme / en_US /删除css文件夹并运行php bin / magento setup：static -cotent：部署命令。
— Nits
您在theme.xml“ foobar1”中有父主题而不是“ foobar”
— St3phan

Answers:

8

_theme.less如果要覆盖父主题的_theme.less文件，则只希望在文件中具有样式。对于该文件，仅加载其中一个，并且如果该文件存在，它将始终是所选主题。从那里，它将使用回退方案来找到该文件并使用它。

因此，根据您的情况，使用_extend.less文件是正确的文件。

不过，这有点令人困惑，因为_extend.less在Magento编译站点中存在的所有样式时，文件中的代码最后加载。所以我想知道加载顺序是否有些混乱。

查看设置方式，尝试将主题设置在其他名称空间而不是同一主题中。这可能无法解决问题，因为您设置主题的方式与Magento设置亮度/空白主题的方式相同。但是对于我所做的所有工作，我都有我的供应商名称空间，该名称空间随后将从3rd party主题或luma / blank扩展。

接下来要尝试的是将代码包装在内置的媒体查询中。我在这里进行了详细介绍，但基本上，它阻止了您的样式两次被加载到styles-l.css和styles-m.css文件中。

//
//    Common
//--------------------------------------
& when (@media-common = true) {}

从那里开始，一切都归结为CSS特异性。如果还有其他比您更高的东西，则您需要在样式的类/ id定义中更具体。您可能想要发布DOM结构的图片，以显示您要定位的对象以及正在寻找的对象。

— circleix
source
好点-也许我正在使用的主题（第三方）做得很奇怪，但是按您的意思，如果我对默认主题进行相同的替代，则不必使用！important。值得一试吗？
— 弗朗西斯·金
1
我想是这样，你可以创建一个快速的主题，只是registration.php，theme.xml和网络文件夹。重新编译，然后在管理员中选择它，看看会发生什么。我在想其他事情正在发生，但是这有可能突然出现在我的脑海中。
— circleix
1
另外，就像进行完整性检查一样，您可以输入样式中唯一的值（我喜欢使用，background-color: tomato因为没人会使用该颜色），然后检查编译后的样式在工作表中的结尾。查找pub/static/frontend/{package}/{theme}/en_us/css两个样式文件。如果这不在文件末尾，则说明默认的加载顺序有问题。
— circleix
4

如果您可以将样式应用到_extend.less文件中，则意味着您在CSS特异性方面存在问题。由于Magento2使用的编译较少，因此大多数样式都非常具体。要覆盖它们，您的样式选择器必须更加具体。我不会在此处发布有关概念本身的详细信息，因为可以在网上找到很多文章。

— 蒂米克
source
3

如果您使用默认的LESS设置，请确保将所有 LESS都写入M2 LESS媒体查询中。如果不这样做，最终将导致重复的CSS和可能的特异性问题。

所有这些都归结为特定性和加载顺序，您的CSS 应该在父主题（或模块）之后加载，因此要否决所有这些，就必须满足其特定性。

例如，如果父主题使用

.parent-selector .selector {
    ...
}

然后，您需要编写相同的选择器，如果由于某种原因无法正常工作，您只需要在其之前添加另一个选择器即可。一种简单的方法是在它前面添加主体，因为它覆盖了每个选择器并增加了特异性。像这样：

body .parent-selector .selector {
    ...
}

本文包含有关CSS特异性的一些很好的信息。

或者，您可以覆盖整个文件

如果您要进行大量定制，则最好覆盖整个文件而不是扩展文件。为此，只需使用相同的文件路径和名称将文件添加到主题中即可。

— 本·克鲁克
source
0

您必须覆盖要覆盖.less的父主题的相同文件，例如，如果要覆盖_theme.less文件，则必须在此处将此文件复制到子主题（确保父主题的路径相同）

frontend/Foobarthemes/boofar/web/css/source/_theme.less

您可以在此处覆盖CSS。

— Dipesh Rangani
source
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.