如何从 DOM 结构中删除随机的 svelte-preprocess 类？

Question

我最近决定检查一下 Svelte.js 然后我想我需要一个scss支持。

所以在安装“svelte-preprocess”之后，我注意到一些奇怪的 class 被添加到我组件中的每个 DOM 元素中。 -> “svelte-1w7boou”

有谁知道这是什么以及如何删除它？顺便说一句，我的研究没有给出任何结果。我没有在文档中找到任何内容..

结构简单。看起来像这样：

<script>

const teachers = [
    { id: 1, name: 'Anna', photo: 'img/teachers/anna.jpg' },
    { id: 2, name: 'Britney', photo: 'img/teachers/anna.jpg' }
];

</script>

   <div class="teacher_wrapper">
        {#each teachers as { name, photo}, i}

            <div class="teacher">
                <img class="img-responsive" src={photo} alt="">
                <span class="teacher_name">{name}</span>
            </div>

        {/each}
    </div>

<style lang="scss">

@import "../scss/style";
.teachers_section{
   padding: 50px 0;
}
.teacher_wrapper{
    display: grid;
    grid-template-columns: repeat(2, minmax(10px, 1fr));
    grid-gap: 10px;
    margin-top: 70px;
    @include MQ(M){
        grid-template-columns: repeat(3, minmax(10px, 1fr));
        grid-gap: 20px;
    }
    @include MQ(L){
        grid-template-columns: repeat(5, minmax(10px, 1fr));
        grid-gap: 20px;
    }
}
.teacher{
    position: relative;
    img{
        filter: grayscale(90);
        transition: all .3s linear;
        &:hover{
            filter: grayscale(0);
        }
    }
}

</style>

Answer 1

svelte-xxx class 用于限定您编写的样式的范围，以便它们仅适用于该组件中的元素。请参阅文档中的 style 部分。

如果要删除它，可以将 cssHash compiler option 设置为空字符串。但是，不建议这样做。最好让组件限定您的样式范围，如果您想让样式转义组件，请使用 :global。

如何从 DOM 结构中删除随机的 svelte-preprocess 类？

How to remove random svelte-preprocess classes from the DOM structure?

svelte

svelte-component