When scoped in Nuxt.js, child elements are not styled - css

Question

I'm using v2 of Nuxt.js.
If css is loaded under the following conditions, no style will be set on the child elements.
Import scss file with style settings with style tag
Add scoped to the style tag above.
Below is a demo.
CodeSandBox
It can be confirmed that the style for the elements under header in /assets/style.scss is not set.
header {
background: #dddddd;
> ul { // not working
list-style: none;
padding: 0;
display: flex;
}
button { // not working
background: black;
color: white;
}
}
Is there a way to style child elements in the form of importing scss?
The main codes are as follows.
<template>
<div id="app">
<Header />
<HelloWorld />
</div>
</template>
<script>
import Header from "./components/Header";
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
Header,
HelloWorld,
},
};
</script>
<style lang="scss" scoped>
#import "./assets/style.scss";
</style>
// Header.vue
<template>
<header>
<ul>
<li>
<h1>{{ appName }}</h1>
</li>
<li>
<button>Sign in</button>
</li>
</ul>
</header>
</template>
// style.scss
header {
background: #dddddd;
> ul {
list-style: none;
padding: 0;
display: flex;
}
button {
background: black;
color: white;
}
}
.hello {
background: #efefef;
padding: 1rem;
}

Answer 1

Its CSS will apply to elements of the current component only. So you need to append below code
<style lang="scss" scoped>
#import "../assets/style.scss";
</style>
at Header.vue to make the css file effected.