css - Shopify 中的 SCSS 和 BEM

Question

我正在编写一个 Shopify 主题，并希望将 BEM 和 SCSS 用于 Shopify 主题中的所有样式。出于某种原因，我的 block 中的元素没有随我的样式规则一起更改。

这是我的 HTML

<div class="featured-hero">
    <a href="/go/to-here">
        <div class="featured-hero__hero-img"></div>
        <div class="featured-hero__text">
            Awesome text here
        </div>
    </a>
</div>

它将包含一个带有文本的图像。很简单!这是 SCSS

.featured-hero {
    width: 100%;
    border: 2px solid black;
    height: 200px;
    background-color: firebrick;

    &[class*='__text'] {
        font-size: 100px;
    }
 }

父 block 内的样式规则按预期运行，但 &[class*='__text'] block 内的所有内容均未执行任何操作。为什么不渲染？

谢谢!

Answer 1

不存在具有 featured-hero 类的元素还具有包含字符串 __text 的类。

选择器应该是

&__text