角度组件的 Sass 结构答案

【问题标题】：Sass structure for angular components角度组件的 Sass 结构
【发布时间】：2016-09-23 19:55:10
【问题描述】：

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

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

如果我们将特定组件使用的所有 CSS 都写在它自己的 SASS 文件中，放在它自己的目录中，我们将在不同的组件中有许多重复的样式。这类情况有通用解决方案吗？

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

【问题讨论】：

在我的例子中，我确实编写了独立的样式表，但是我将函数、mixin 和变量等内容导入到独立的文件中。这样每个组件就不会依赖其他组件，这对我来说是最好的方法，因为这样它们也可以在其他项目中重用。

标签： css angular sass structure

【解决方案1】：

在我正在进行的一个项目中，我们一直在为组件使用单独的样式表，同时也为应用程序中的常见元素使用 common 样式表。

- 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 是值得的（如果您还没有的话）。

【讨论】：

这也是我的做法，你可以为表单元素创建一个文件，例如设置所有表单元素的样式，例如字体大小、颜色等。
谢谢。在这种情况下，如果我想在组件的 SASS 中使用一些样式，我应该在其中导入通用的 css，例如扩展我想要重用的样式，对吗？在这种情况下，我不会在组件的 SASS 中也包含一些不必要的样式吗？这被认为是最佳做法吗？另外，如果我在不同的组件中导入一些通用样式，我会在最终编译的页面 CSS 中重复很多相同的样式，对吧？有没有办法避免这种情况？谢谢。
你的组件 SASS 应该只是 那个组件的样式。如果您的组件需要在样式上有所不同，那么我将在您的组件中创建配置类。 .component { 颜色：白色； } .component--red { 颜色：红色； }
感谢您分享您的建议。

【解决方案2】：

我建议将 scss 拆分为部分。

变量定义、函数和混合（所有可重用的东西）
所有样式都是全局的。如字体大小、表单样式、网格等
可以封装到组件中的组件特定样式

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

【讨论】：

谢谢。但是，正如我在上面的评论中提到的那样，如果我导入全局样式以在组件的 SASS 文件中扩展它的某些部分，我不会在组件中包含一些我不需要的样式吗？另外，在最终编译的 CSS 中，如果我在不同的组件中导入相同的全局样式，我会不会有重复的样式定义？
我会有重复的样式。但是组件中加载的样式只会影响组件内部的 html。因此，您可以封装特定于组件的样式，并确保它不会改变其他组件的样式。在您的构建过程中，您可以将此样式添加到您的组件包中。并且当使用延迟加载时，您可以使用较小的全局样式并将组件特定的部分移动到组件中，并且仅在需要时将这种样式与组件一起加载。
感谢您分享您的建议。

【解决方案3】：

根据您的 cmets 和研究，以下是我们在样式组织方面所采用的项目结构（我们也在使用 MDL）：

- 应用程序 - 资产 -CSS 重置.scss helpers.scss（一些全局样式） mdl.scss（本机 MDL 样式） variables.scss（全局变量） - 成分 - 组件-a component-a.scss（将在此处导入 component-a-variables.scss） component-a-variables.scss（仅用于此组件的变量） - 组件-b 组件-b.ts component-b.scss（将在此处导入 component-b-variables.scss） component-b-variables.scss（仅用于此组件的变量）

【讨论】：

嗨。如果component-b-variables.scss 仅在component-b.scss 中使用，那么为什么要将它们放在单独的文件中？它们没有被重用，所以我看不出必须打开第二个文件来更改局部变量有什么好处。这就像将 TypeScript 类属性放在一个单独的文件中，然后导入它们