CSS überschreiben für verschiedene Seiten in Einzelseitenanwendung

Question

Ich baue SPA mit angular.js, zwei Seiten, Login und Dashboard hat einen anderen Hintergrund, aber da es eine einzelne Seite Anwendung nach dem Login ist, ändert sich die Hintergrundfarbe nicht zu der neuen Farbe erwähnt in dashboard.less Datei. In diesem Fall benutze ich !important, Dashboard Hintergrund wird auch nach dem Abmelden reflektiert.

Ich möchte bestimmte Seite CSS nur auf ui-Routing geladen werden.

Bitte schlagen Sie eine Lösung dafür vor. Ich benutze weniger mit Webpack. Ich weiß, dass solche Probleme auch für spätere Seiten kommen werden. Wie kann ich dieses Problem vermeiden?

Answer 1

Ich denke, wir haben hier eine Lösung https://github.com/manuelmazzuola/angular-ui-router-styles

Dieses framwork und verwenden Sie es wie

.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

gut Sie so etwas tun könnte.

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

wo, wenn Sie ein UI-Routing und laden Sie den Controller.

Sie würden

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