CSS覆盖单页面应用程序中的不同页面

Question

I am building SPA with angular.js , two pages, login and dashboard has different background, but since it's a single page application after login the background color doesn't change to the new color mentioned in dashboard.less file. In this case I use !important , dashboard background get reflected even after logout.

I want specific page css only to be loaded on ui-routing.

Kindly suggest a fix for it. I am using less with webpack. I know such issues will come for later pages too. How can I avoid this problem.

Answer 1

I think we have a solution here https://github.com/manuelmazzuola/angular-ui-router-styles

Add this framwork and use it like

 .state('state1', {
    url: '/state1',
    controller: 'State1controller',
    template: '<div ui-view></div>',
    data: {
      css: [
        'styles/custom-state1.css',
        {
          name: 'layout',
          href: 'styles/state1-layout.css'
        }
      ]
    }
  })

Answer 2

well you could do something like this.

<link data-ng-if="page.css" rel="stylesheet" type="text/css" data-ng-href="css/app/page/{{page.css}}/page.css" />

where when you do a ui-routing and load the controller.

you would have

$scope.page = {css: "loginpage"};