css - Angular 组件的 Sass 结构

Question

我们的团队正在开展一个基于 Angular 大型元素，我们正在为不同的控件(导航、输入、文本区域、表格、按钮等)创建小型独立组件，以便它们可以在不同的元素中独立使用。

我们不确定在这种情况下如何组织样式表(我们目前使用的是编译为一个 css 文件的 sass)。如果所有组件都需要独立并拥有自己单独的 sass 文件，我们将如何组织诸如 css 继承之类的东西，使用来自不同供应商 css-s 的样式(例如我们使用 MDL)。

如果我们将特定组件使用的所有 CSS 仅写入其自己目录中的自己的 SASS 文件中，我们将在不同的组件中拥有许多重复的样式。是否有针对此类情况的通用解决方案？

非常感谢您分享您的建议!

Answer 1

在我正在进行的一个元素中，我们一直在为组件使用单独的样式表，同时也为应用程序中的公共(public)元素使用公共(public)样式表。

- 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。

阅读 Component Styles 是值得的(如果您还没有)在 Angular 2 中。