Angular 中常用 CSS 的放置位置答案

【问题标题】：Where to Put Common CSS in AngularAngular 中常用 CSS 的放置位置
【发布时间】：2017-03-01 20:18:06
【问题描述】：

我一直在查看 Angular 样式指南 (angular.io) 中的项目结构。他们推荐的一切似乎都有道理，但我对一件事感到困惑：你会把 common CSS 放在这个结构中的什么地方？

通过常见的CSS，我说的是您想要导入到多个其他CSS 文件中的Sass 部分。如果您使用的是模板语言，甚至可以使用 HTML。

【问题讨论】：

【解决方案1】：

如果您使用 Angular cli 创建项目，您会在 src 文件夹下找到一个文件 styles.css。把你所有常用的样式都放在这个文件里。

.angular-cli.json 文件提到这个文件被捆绑为一个样式

"styles": [
        "styles.css"
      ],

【讨论】：

【解决方案2】：

使用 SCSS 时，创建一个包含常用样式的 shared/shared.scss 文件是一个好方法。并导入您在 scss 文件顶部添加 @import '../shared/shared'; 的其他组件以使用该常用样式。

【讨论】：

【解决方案3】：

在包含所有共享 css 文件的 assets 文件夹中创建样式文件夹。现在将这些共享的 css 文件导入到 styles.scss 文件中，或者直接添加到样式数组下的 angular.json 文件中。

共享模块仅用于组件、管道、指令和共享 ts 文件

【讨论】：

【解决方案4】：

向下滚动到Angular 2 Style Guide 中的“应用程序结构和 Angular 模块”。官方应用程序结构具有shared 文件夹（app 文件夹中的一个），共享文件应该放在其中。共享的 CSS 文件应该放在相应的 shared 文件夹中。

【讨论】：