Question

我正在尝试将其他字体中的字体大小应用于根html和body元素，我有一个styles文件夹，其中包含几个子文件夹，然后将它们导入到我的.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

尝试

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

如果没有其他！重要样式可以解决问题

Answer 2

如果您给 body 标签添加一个类并将样式应用于类而不是直接应用于element标签，那会更好。

如果您在 body 标签下设置了 main div ，甚至可以给它一个类和样式，甚至更好：

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


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

Vue应用程序，未应用html样式和body元素，我正在使用SCSS

2 个答案: