SCSS overriding imported style with & not working

UPDATE: It's working if I move my SASS into the global styles.scss file and out of the component one. Why is that?

In my sass file I import a theme:

@import 'myCoolTheme.scss'

In my template, I'm using a Panel component like this:

<div class="container">
    <my-custom-panel class="panel-block" />
</div>

Now, when the template gets rendered the Panel brings in other HTML elements like this:

<div class="container">
    <my-custom-panel class="panel-block">
        <div class="panel-body">
            <div class="panel-header">
            </div>
        </div>
    </my-custom-panel>

I want to add some rounded corners to my panel-header class so I thought the way to correctly override was this:

.container {
    my-custom-panel.panel-block {
        div.panel-body {
            &.panel-header {
                border-top-left-radius:8px;
                border-top-right-radius: 8px
            }
        }
    }
}

But it's not rounding the corners whatsoever. I thought the & is supposed to keep the initial values and just add anything you want to override. What did I do wrong?

I mean, I can't even see my styles from my component scss file in Chrome dev tools. Shouldn't they at least show up there so I can see what's overriding them?