Wie kann ich View-spezifische .less-Dateien in AngularJS einschließen

Question

Ich verwende angular UI_Router in meinem Projekt. Ich möchte spezifische .less-Dateien für bestimmte Zustände laden. Ich habe es mit eckigen UI-Router-Stilen versucht, aber es hat nicht funktioniert. Vielleicht benutze ich weniger statt CSS.

Bitte überprüfen Sie meinen Code. verwende angular-ui-router-styles für CSS, die in das routing eingefügt werden. es funktioniert, aber die Stile für die Seiten spiegeln nicht wider.

index.js

require('jquery/dist/jquery.js'); 
require('bootstrap/dist/css/bootstrap.css'); 
    require('./content/common.css'); 
require('angular'); 

require('angular-ui-router/release/angular-ui-router.js'); 
require('angular-route/angular-route.js'); 
require('angular-cookies/angular-cookies.js'); 
require('materialize-css/dist/css/materialize.css'); 
require('angular-ui-router-styles/ui-router-styles.js'); 
angular.module('adminsuite',['ui.router','ngCookies','uiRouterStyles']).config(function($stateProvider, $urlRouterProvider) { 

$urlRouterProvider.otherwise('/'); 

$stateProvider 
    .state('login', { 
     url: '/', 
     views:{ 
      content:{ 
       templateUrl: 'Login/login.html', 
       controller: 'loginController', 
       data:{ 
        css:"styles/login/login.less" 
       } 
      }, 
      footer:{ 
       templateUrl: 'common/footer.html', 
       controller: 'footerController' 
      } 
     } 



    }) 
    // HOME STATES AND NESTED VIEWS ======================================== 
    .state('dashboard', { 
     url: '/dashboard', 
     views:{ 
      header:{ 
       templateUrl: 'common/header.html', 
       controller: 'headerController' 
      }, 
      content:{ 
       templateUrl: 'dashboard/dashboard.html', 
       controller: 'dashboardController', 
       data:{ 
        css:"styles/dashboard/dashboard.less" 
       } 
      }, 
      footer:{ 
       templateUrl: 'common/footer.html', 
       controller: 'footerController' 
      } 
     } 
    }); 

    // ABOUT PAGE AND MULTIPLE NAMED VIEWS ================================= 

    }); 

require('./Login/loginController.js'); 
require('./dashboard/dashboardController.js'); 
require('./common/headerController.js'); 
require('./common/footerController.js'); 
    require('./services/loginAuthenticationService.js'); 
require('./services/UserServices.js'); 

Answer 1

Der einzige Weg, dass mir bewusst bin, dies ein Webpack oder ähnliches Build zu verwenden, zu erreichen wäre. Auf diese Weise können Sie require('./state-1.less') innerhalb Ihrer Komponente/Direktive. Die Idee ist, dass das Webpack nur Dateien enthält, die benötigt werden. In realistischer Weise ist es jedoch nicht einfach, ein neues Kompilierungstool/Task Runner einzurichten, wenn Sie bereits begonnen haben.

Es gibt kein Problem bei der Bereitstellung aller CSS zu Ihrer Anwendung. Wenn das Wechseln Ihre Aufgabe ist, können Sie ngclass verwenden, um verschiedene Stilblöcke basierend auf Ereignissen bereitzustellen, die innerhalb jedes Status auftreten.

The_ehT ist korrekt, Sie müssen kompiliertes CSS bereitstellen, wenn Sie das gewünschte Plugin verwenden möchten.