Vue组件css层次结构

Question

我正在构建一个CSS框架，以便在我的所有内部项目中使用。主文件的组织如下：

  @import "~normalize.css/normalize.css";
  @import "_variables.scss";
  @import "_mixins.scss";
  @import "_elements.scss";
  @import "_styledElements.scss";
  @import "_aux.scss";
  @import "_base.scss";
  @import "_composedElements.scss";
  @import "_layouts.scss";

在normalize.css中定义了一些按钮规则，例如：

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: sans-serif; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }

在_elements.scss文件中，我定义了按钮的默认样式：

button {
      font-size: 1em;
      height: 40px;
      -webkit-appearance: none;
      background-color: $mainColor;
      color: $geophy-white;
      text-transform: uppercase;
      outline-color: $uiColor;
      border: none;
      padding: 2px 12px;
      cursor: pointer;
      border-radius: 2px;
      font-family: $condensed;

      &:hover {
          background-color: darken($mainColor, 20%);
          color: $geophy-white;
      }

      &--disable {
          opacity: 0.8;
          &:hover {
          }
      }
}

一切正常：我构建我的项目，导入主scss文件，我已准备好所有样式。 问题是如果HTML元素在外部Vue组件内，normalize.css会覆盖我的库样式。这是一个例子：

外部Vue组件css：

内部Vue组件css：

我该如何解决这个问题？

Answer 1

这只是覆盖样式的问题，而不是Vue.js

我建议在Vue组件中的按钮中添加一个类，并将样式应用于该组件。标准化，您的基本样式将只是基础样式。然后，您的组件内样式可以覆盖他们需要的内容。

如果您担心组件之间的类名冲突，只需在scoped标记中添加<style>。