0

The main use case I've seen for using webpack on css is with Angular2 or React where you have components that you can require the stylesheets onto. However, I'm using AngularJS so I don't know where I should logically be importing these stylesheets, does anybody know the best practice for this?

Concretely, given:

  • a stylesheet "loginBox.css"
  • a template "login.html"
  • a controller LoginController in "login.controller.js"

and

  • a route configuration

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

How do I get "loginBox.css" to apply to "login.html" and only "login.html"?

Chandler Squires
  • 397
  • 3
  • 7
  • 22
  • You could create LoginModule in which you can just import the css you want. Then add this login module as dependency for main module.. – Thaadikkaaran Nov 19 '16 at 04:12

2 Answers2

2

To apply css to only one component you have to use shadow dom, however angularjs 1.5.x does not use shadow dom. But from your specification you have 2 options:

1. Load css file in router or via custom directive.

As suggested how-to-include-view-partial-specific-styling-in-angularjs you caninclude your custom css files using either custom directive or by using angular-css module (mode info about this module). I'd suggest to use the second option (angular-css module). Another example how to use angular-css module. However you will have to use specific styles to apply only to /static/templates/authentication/login.html file.

2. Load css files using module local scope.

Another way is to break you application to specific ES6 modules (don't get this mixed up with angular's modules) and include them in main ES6 module. To understand ES6 modules follow this link. And then you can use local scope with css-loader css-loader#local-scope. This option might be harder to make it work, because you will have to change your build process and split application to seperate modules, but you will get option to apply stylesheets to only one module.

To be clear the best sollution might be the first one, no need to change your build process and you can just add one NG module and you are good to go. No need to talk about that you can then load CSS files to your directives or components. But as you stated you need to apply your changes only to one particular .html file, so going for second option might more suit your needs.

Community
  • 1
  • 1
charlie
  • 69
  • 5
0

When building less modular code requiring stylesheets in your entry file makes sense

deiga
  • 1,587
  • 1
  • 13
  • 32