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

CodePudding user response：

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.