Question

我们的团队正致力于基于角度的大型项目，我们正在为不同的控件（导航，输入，文本区域，表格，按钮等）创建小型独立组件，以便它们可以在不同项目中独立使用。

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

如果我们将特定组件仅在其自己的SASS文件中使用的所有CSS写入其自己的目录中，那么我们将在不同的组件中具有许多重复的样式。这类案件有共同的解决方案吗？

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

Answer 1

在我正在开发的项目中，我们一直在为组件使用单独的样式表，同时还为应用程序中的常见元素提供了常用的样式表。

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

在Angular 2中阅读Component Styles是值得的（如果你还没有）。

Answer 2

我建议将scss分成几部分。

变量定义，函数和mixins（可重用的所有内容）
所有全球风格。如字体大小，表单样式，网格等
可以封装到组件中的组件特定样式

这样，您可以为应用程序提供一个全局样式表，并封装特定于组件的样式。通过分离可重用的所有内容（变量，函数和混合），您可以在仅包含在组件中的组件scss中使用的样式中使用它。

Answer 3

根据您的评论和研究，以下是我们在样式组织方面所采用的项目结构（我们也使用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)

角部件的Sass结构

3 个答案: