Svelte component styles aren't overriding global styles

I am using scss in a Sveltekit project and have included my main global styles in my root layout file.

<script lang="ts">  import 'css/app.scss'</script

In my global styles, I have the style:

button {  padding: 0;}

In a component, I have added this local style:

<style lang="sass">  button {    padding: 1rem;  }</style>

When the site renders, the local style is overridden by the global style. I can add !important to the local style, but I am looking for a way to have the local style always take precedence over the global style.

Thank you in advance for you suggestions!