如何使用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模板中？

回答

相關問題