Vue scoped styling not working with elements that have been added inside a slot

Moving my styling to a locale setup but seeing that when I insert element into slot containers they will not work. I guess this is normal if so is there a way to solve this, keep in mind NO I am not going to place the parent (.child) styling in the parent component and NO I want to keep my CSS in seperate scss files.

component (parent)

<template>
   <wrapper>
       <div class="child">Hello</div>
   </wrapper>
</template>

component (wrapper called)

<template>
   <div class="wrapper">
       <slot></slot>
   </div>
</template>

<style lang="scss" scoped>
@import "../../../sass/components/_container.scss";
</style>

container.scss

.wrapper{
    background-color:#333;

    .child{
         background-color:#fff;// not doing anything
    }
}