如何使用 webpack 将 CSS 引入 AngularJS 模板？答案

【问题标题】：How to require CSS into AngularJS templates with webpack?如何使用 webpack 将 CSS 引入 AngularJS 模板？
【发布时间】：2017-04-03 00:17:09
【问题描述】：

我看到的在 css 上使用 webpack 的主要用例是使用 Angular2 或 React，您可以在其中拥有可以require 样式表的组件。但是，我使用的是 AngularJS，所以我不知道我应该在哪里逻辑上导入这些样式表，有人知道这样做的最佳实践吗？

具体来说，给定：

样式表“loginBox.css”
模板“login.html”
“login.controller.js”中的控制器LoginController

和

路由配置

routeProvider.when('/login', { controller: 'LoginController', controllerAs: 'vm', templateUrl: '/static/templates/authentication/login.html' })$

如何让“loginBox.css”应用于“login.html”且仅应用于“login.html”？

【问题讨论】：

你可以创建 LoginModule，你可以在其中导入你想要的 css。然后将此登录模块添加为主模块的依赖项..

标签： angularjs webpack

【解决方案1】：

在您的入口文件中构建需要样式表的模块化程度较低的代码是有意义的

【讨论】：

【解决方案2】：

要将 css 仅应用于一个组件，您必须使用 shadow dom，但是 angularjs 1.5.x 不使用 shadow dom。但根据您的规范，您有 2 个选项：

1.在路由器中或通过自定义指令加载 css 文件。

按照how-to-include-view-partial-specific-styling-in-angularjs 的建议，您可以使用自定义指令或使用angular-css 模块（有关this module 的模式信息）包含自定义css 文件。我建议使用第二个选项（angular-css 模块）。另一个例子如何使用angular-css module。但是，您必须使用特定样式才能仅应用于 /static/templates/authentication/login.html 文件。

2。使用模块本地范围加载 css 文件。

另一种方法是将您的应用程序分解为特定的 ES6 模块（不要将其与 Angular 的模块混淆）并将它们包含在主 ES6 模块中。要了解 ES6 模块，请关注this link。然后您可以将本地范围与 css-loader css-loader#local-scope 一起使用。此选项可能更难使其工作，因为您必须更改构建过程并将应用程序拆分为单独的模块，但您可以选择仅将样式表应用于一个模块。

要明确最好的解决方案可能是第一个，无需更改构建过程，您只需添加一个 NG 模块即可。无需谈论您可以将 CSS 文件加载到您的指令或组件中。但是正如您所说，您只需要将更改应用到一个特定的 .html 文件，因此选择第二个选项可能更适合您的需求。

【讨论】：