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

Question

我见过在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”？

Answer 1

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

<强> 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文件，因此选择第二个选项可能更符合您的需求。

Answer 2

在构建较少模块化的代码时，需要在条目文件中使用样式表是有意义的