Vue 应用程序，未应用 html 和 body 元素的样式，我使用的是 SCSS答案

【问题标题】：Vue app, styles to html and body elements are not applied, I am using SCSSVue 应用程序，未应用 html 和 body 元素的样式，我使用的是 SCSS
【发布时间】：2019-04-29 13:21:50
【问题描述】：

我正在尝试将字体大小以及其他样式应用于根 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 并且正文标签不接受样式！如果需要，请随时询问更多信息，提前感谢..

【问题讨论】：

标签： html vue.js sass

【解决方案1】：

试试

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

如果没有其他 !important 样式可以解决问题

【讨论】：

【解决方案2】：

如果你给你的body标签一个类并将你的样式应用到一个类而不是直接应用到一个元素标签会更好。

或者如果你在 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;
}

【讨论】：