CODEWITHSUNDEEP
sveltesvelte-component
Alex
Alex

Reputation: 71

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

I recently decided to check Svelte.js Then I thought I will need a scss support.

So after installing "svelte-preprocess" I noticed that some strange class is added to EVERY DOM element inside my component. -> "svelte-1w7boou"

Does anyone know what is this and how to remove it? Tbh my research does not gave any results. I did not found anything inside the docs..

Structure is simple. Looks like this:

<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>

enter image description here

Upvotes: 2

Views: 1380

Answers (1)

Geoff Rich
Geoff Rich

Reputation: 5482

The svelte-xxx class is there to scope the styles you write so that they only apply to elements in that component. See the style section in the docs.

If you want to remove it, you can set the cssHash compiler option to an empty string. However, this is not recommended. It is better to let the component scope your styles and use :global if you want a style to escape the component.

Upvotes: 4

Related Questions