角度組件的Sass結構

我們的團隊正在開發一個基於角度的大型項目，我們正在爲不同的控件（導航，輸入，textarea，表格，按鈕等）創建小型獨立組件，以便它們可以在不同的項目。角度組件的Sass結構

在這種情況下我們不確定如何組織樣式表（我們現在使用sass編譯爲一個css文件）。如果所有組件都需要獨立並擁有自己的單獨sass文件，那麼我們將如何使用來自不同供應商css-s的樣式（例如，我們使用MDL）來組織css繼承之類的東西。

如果我們編寫一個特定組件只在其自己的SASS文件中使用的所有CSS，我們將在不同的組件中有很多重複樣式。這種情況是否有共同的解決方案？

非常感謝您分享您的建議！

2016-09-20 Asya Kostanyan

在我來說，我其實做寫獨立的樣式表，但我將諸如函數，混入和變量之類的東西導入到獨立文件中。這樣，每個組件都不依賴於其他組件，這對我來說是最好的方式，因爲那樣它們也可以在其他項目中重用。 – Chrillewoodz

在我正在開發的一個項目中，我們一直在使用單獨的樣式表作爲組件，同時還有常用樣式表用於應用程序中的常用元素。

- app 
    - assets 
     - css 
      main.scss 
      buttons.scss 
      forms.scss 
      grid.scss 
      typography.scss 
     - images 
     - fonts 
    - components 
     - component-a 
      component-a.ts 
      component-a.scss 
     - component-b 
      component-b.ts 
      component-b.scss

您的組件SASS在此實例中應該只包含SASS組件。

這將是值得的（如果你還沒有的話）在角2

來源

2016-09-20 08:53:14 itsphilz

這也是我的工作方式，你可以爲表單元素創建一個文件，例如字體大小，顏色等。 – Chrillewoodz

謝謝。在這種情況下，如果我想在組件的SASS中使用一些樣式，我應該在其中導入一般的CSS，例如，擴展我想要重用的樣式，對吧？在這種情況下，我不會在組件的SASS中包含一些不必要的樣式嗎？這被認爲是最佳做法？另外，如果我在不同的組件中導入一些常規樣式，我將在頁面的最終編譯的CSS內部有很多相同樣式的重複，對不對？有沒有辦法避免這種情況？謝謝。 –

您的組件SASS應該只適用於*該組件*。如果你的組件需要改變風格，那麼我會在你的組件中創建配置類。 .component {color：white; } .component - red {color：red; } – itsphilz

上Component Styles讀了我會建議分拆成SCSS向部分。

變量定義，功能和混入（一切，這是可重複使用）
所有樣式是全球性的。如字體大小，形式，風格，電網等可以封裝成組件

這種方式可以提供針對應用一個全局樣式表和封裝組件特定風格

組件特定的風格。通過分離可重用的所有內容（變量，函數和混合類型），您可以以僅用於組件中包含的組件scss的樣式使用它。

來源

2016-09-21 14:57:57 DaSch

謝謝。但是，正如我在上面的註釋中提到的那樣，如果我導入全局樣式以將其一部分擴展到組件的SASS文件中，我不會在組件的內部包含某些我不需要的樣式嗎？另外，在最終編譯的CSS中，如果我在不同的組件中導入相同的全局樣式，是不是會有重複的樣式定義？ –

我會重複樣式。但是，組件中加載的樣式只會影響組件內的html。因此，您可以封裝特定於組件的樣式，並確保它不會更改其他組件的樣式。在構建過程中，您可以將這些樣式添加到組件包中。當使用延遲加載時，可以使用較小的全局樣式，並將組件特定的部件移至組件，並只在需要時與組件一起加載此樣式。 – DaSch

感謝您分享您的建議。 –

根據您的意見和研究，以下是我們在款式組織方面就項目（我們也使用MDL）的結構：

 
- app 
    - assets 
     - css 
      reset.scss 
      helpers.scss (some global styles) 
      mdl.scss (native MDL styles) 
      variables.scss (global variables) 
    - components 
     - component-a 
      component-a.scss (will import component-a-variables.scss here) 
      component-a-variables.scss (variables used only for this component) 
     - component-b 
      component-b.ts 
      component-b.scss (will import component-b-variables.scss here) 
      component-b-variables.scss (variables used only for this component)

來源

2016-09-23 08:54:47

嗨。如果'component-b-variables.scss'只用在'component-b.scss'中，那麼爲什麼它們在一個單獨的文件中？它們沒有被重用，所以我不認爲有必要打開第二個文件來改變局部變量。這就像在一個單獨的文件中使用TypeScript Class屬性，然後導入它們一樣 – Ryan

角度組件的Sass結構

回答

相關問題