为什么我的全局样式在 vue.js 应用程序中不起作用答案

【问题标题】：Why are my global styles not working in a vue.js app为什么我的全局样式在 vue.js 应用程序中不起作用
【发布时间】：2020-06-01 10:05:12
【问题描述】：

我有一个非常奇怪的问题。在使用 Vue CLI 新生成的 vue.js 项目中，我的 scss 文件无法正常工作。我正在使用在 vue.config.js 中配置的 scss，如下所示：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/scss/all.scss";
        `
      }
    }
  }
};

我在 scss 文件夹中有多个文件，直到我在单个文件组件中使用 scoped 关键字（例如我的导航）之前都可以。然后我的全局样式由于某种原因被忽略了：

<template>
  <div class="nav">
    <ul class="nav__menu">
      <li class="nav__item">
        <span>item</span>
      </li>
      <li class="nav__item">
        <span>item</span>
      </li>
      <li class="nav__item">
        <span>item</span>
      </li>
      <li class="nav__item">
        <span>item</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>
<style lang="scss" scoped>
 .nav {
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,00c2a9+100 */
   background: rgb(30, 87, 153); /* Old browsers */
   background: -moz-linear-gradient(
     top,
     rgba(30, 87, 153, 1) 0%,
     rgba(0, 194, 169, 1) 100%
   ); /* FF3.6-15 */
   background: -webkit-linear-gradient(
     top,
     rgba(30, 87, 153, 1) 0%,
     rgba(0, 194, 169, 1) 100%
   ); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(
     to bottom,
     rgba(30, 87, 153, 1) 0%,
     rgba(0, 194, 169, 1) 100%
   ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#00c2a9',GradientType=0 ); /* IE6-9 */
   border-radius: 15px;
   color: #fff;
   height: calc(100vh - 8px);
   padding: 10px;
   position: fixed;
   top: 4px;
   left: 4px;
   width: 200px;
   z-index: 5;
 }
</style>

全局样式：

// not working
html {
  background: black;
  box-sizing: border-box;
  font-size: 13px;

  // but this is working
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
}

直到现在我还没有遇到过这种情况。有什么我错过的吗，因为我看不到它:( 提前致谢。

我在 Manjaro Linux 18.1.5 上，如果有帮助的话，使用 node.js 10.16.0 和 npm 6.13.1。

【问题讨论】：

标签： html css vue.js webpack sass

【解决方案1】：

对于未来的读者-我发现了问题...如果组件不包含 nonempty 样式标记，则不会将 scss 文件导入到组件中。

发现在所有组件中导入每个 scss 文件几乎是个坏主意，因为它最终会导致一个非常大的 css 文件，其中包含大量未使用/重复的代码。

所以现在我将“全局”scss 文件用于变量和 mixins，一切运行顺利。

【讨论】：