如何使用webpack将CSS添加到AngularJS模板中？

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

具体地，下式给出：

样式表 “loginBox.css”
在 “login.controller.js”

模板 “的login.html”

控制器LoginController

和

路由配置

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

如何获得 “loginBox.css” 适用于 “login.html的” 独一无二 “的login.html”？

来源

2016-11-19 Chandler Squires

您可以创建LoginModule，您可以在其中导入您想要的CSS。然后添加此登录模块作为主模块的依赖项。 – Thaadikkaaran

要应用CSS来，你必须使用阴影DOM只有一个组件，但是angularjs 1.5.x不使用阴影DOM。但从你的规格你有2个选项：

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

至于建议how-to-include-view-partial-specific-styling-in-angularjs您选择使用自定义的指令，或通过使用angular-css模块（模式信息约this module）caninclude您的自定义CSS文件。我建议使用第二个选项（angular-css模块）。另一个例子如何使用angular-css module。但是，您将不得不使用特定的样式来仅应用于/static/templates/authentication/login.html文件。

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

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

需要明确的是最好的sollution可能是第一位的，没有必要改变你的构建过程中，你可以再补充一个NG模块，你是好去。没有必要谈论你可以加载CSS文件到你的指令或组件。但是正如您所说的，您只需将您的更改应用于一个特定的.html文件，那么选择第二个选项可能更适合您的需求。

来源

2016-11-21 16:09:52 charlie

当你进入文件少建模块化的代码需要的样式表是有道理的

来源

2016-11-19 13:23:02 deiga

如何使用webpack将CSS添加到AngularJS模板中？

回答

相关问题