VueコンポーネントCSS階層

Question

私はすべての内部プロジェクトで使用する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で：normalize.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"; 

は、例えば、いくつかのボタンのルールを定義されています。次のようにメインのファイルが構成されています。

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のコンポーネント内のボタンにクラスを追加し、それにスタイルを適用するお勧めします

Vue.jsない一般のスタイルをオーバーライドするとだけの問題です。ノーマライズし、ベーススタイルはベーススタイルになります。コンポーネント内のスタイルは、必要なものをオーバーライドすることができます。

コンポーネント間でクラス名が競合することが心配な場合は、<style>タグにscopedを追加するだけです。