svelte - 如何从 DOM 结构中删除随机的精简预处理类？

Question

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

因此，在安装“svelte-preprocess”之后，我注意到组件内的每个 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 类用于限制您编写的样式，以便它们仅适用于该组件中的元素。请参阅style文档中的部分。

如果想删除，可以设置cssHash compiler option到一个空字符串。但是，不建议这样做。如果您希望样式转义组件，最好让组件限制您的样式并使用 :global。