Vue組件css層次結構

我正在構建一個CSS框架以用於我的所有內部項目。主文件組織如下：Vue組件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：

我該如何解決這個問題？

來源

2017-10-05 ste

這只是一個與一般覆蓋的風格問題，而不是Vue.js

我建議增加一類的Vue的組件內的按鈕，應用樣式了這一點。標準化和您的基本樣式將只是基礎樣式。然後，您的組件內樣式可以覆蓋他們需要的樣式。

如果您擔心組件之間的類名衝突，只需在<style>標記中添加scoped即可。

來源

2017-10-05 17:00:20

但爲什麼在內部組件中，層次結構正常工作，但在外部組件中卻沒有？ – ste

@ste你會介意提供組件的代碼嗎？我現在只看到樣式表，所以我的援助是有限的。 –

Vue組件css層次結構

回答

相關問題