Vue приложение, стили к HTML и элементы тела не применяются, я использую SCSS

Question

Я пытаюсь применить размер шрифта среди других стилей к корневым элементам html и body, у меня есть папка стилей, в которой есть пара подпапок, затем я импортирую их в свои компоненты .vue.в файле main.scss я применяю стили к универсальным селекторам, и, как я сказал для html и body, стили универсальных селекторов применяются вместе с любым другим элементом, который я выбираю вручную, однако стили, которые я используюпопытки присвоения корневым элементам не применяются.

// this is my main.scss
// this code gets applied 
*, *::before, *::after {
  padding: 0;
  margin: 0;
}

.test {
  border: 2px solid red; 
 }

// this does NOt get applied
html {
  font-size: 62.5%;
  color: #777;
}
 

<template>
  <section class="Home">
    <div class="container">
      <h1 class="test">Hello world</h1>
      <p>this is a test</p>
    </div>
  </section>
</template>

<style lang="scss">
 @import './scss/main.scss
 
 
</style>

снова, я уверен, что у меня нет проблем с компиляцией или импортом моих файлов .scss, так как некоторые стили успешно применяются, я просто не понимаю htmlи теги body не принимают стили !!не стесняйтесь просить больше информации, если это необходимо, заранее спасибо ..

Answer 1

Было бы лучше, если бы вы дали класс своему тегу body и применили свой стиль к классу, а не применили его непосредственно к тегу элемента.

Или даже лучше, если вы установите main div в теге body , присвойте ему класс и стиль, которые вместо этого:

// app.vue
<template>
  <div id="app">
    <div class="bodyContainer">
      //Content
    </div>
  </div>
</template>


// main.scss    
.bodyContainer {
  font-size: 62.5%;
  color: #777;
}

Answer 2

Попробуйте

* {
  font-size: 62.5% !important;
  color: #777 !important;
}

Если нет других ! Важных стилей, которые бы помогли