将自定义指令的 css 样式保存在单独的文件中答案

【问题标题】：Keeping the css styling of a custom directive in a separate file将自定义指令的 css 样式保存在单独的文件中
【发布时间】：2015-01-24 01:39:27
【问题描述】：

我正在学习 Angular，我需要有关最佳实践的建议，以及深入研究该主题的一般方向：

我正在尝试使用 Angular 创建一个 Web 应用程序，该应用程序由许多独立的小部件组成，我决定将它们分别实现为独立的自定义指令。

我想让这些自定义指令尽可能地可重用、可移动、可替换和内聚，并将其相关的 html/css/js 文件的所有放在自己的专用文件夹中，并带有一个文件夹类似这样的结构：

为自定义指令的模板部分加载单独的 CSS 文件的最佳做法是什么？（例如，我应该从 partial.html 加载最终会出现在 html 正文中的 CSS 吗？我应该考虑在构建时将我的 css 文件与 Grunt 合并吗？）

【问题讨论】：

【解决方案1】：

您应该将所有 CSS 构建到一个文件中。如果不进行合并，您需要向服务器发出额外的请求并处理 CSS，这会在页面呈现之前增加更多时间。

为了提高加载性能，您可以将所有 HTML 片段合并到一个文件中，也可以预先加载。

<script type="text/ng-template" id="temp2.html">
    <div class="view">
    </div>
</script>

【讨论】：

完全不同意。将组件资产组合在一起使它们更加便携，并且可以使用 grunt 或 gulp 等工具为您进行组合
@charlietfl 是的，您可以将文件在源代码中分开，但将它们组合起来进行部署。如果您使用这些工具，这种组合也将是运行 CSS 预处理器（例如 LESS）的副产品。