ビュー固有の.lessファイルをAngularJSに含める方法

Question

私は自分のプロジェクトで角度UI_Routerを使用しています。特定の状態に対して特定の.lessファイルをロードしたい私は角度UIルータースタイルで試しましたが、うまくいかなかったのです。 cssの代わりにlessを使っているかもしれません。

私のコードを確認してください。 cssがルーティングに追加するために、angle-ui-router-stylesを使用しています。それは動作していますが、ページのスタイルは反映されていません。

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

私は、これはWebpackまたは類似のビルドを使用することです達成するための意識だ唯一の方法。このようにして、コンポーネント/指令内でrequire('./state-1.less')を実行することができます。アイデアは、webpackには必要なファイルだけが含まれているということです。現実的には、新しいコンパイルツール/タスクランナーの設定は、すでに開始していれば簡単ではありません。

すべてのCSSをアプリケーションに提供することは問題ありません。切り替えがあなたの仕事である場合、ngclassを使用して、各状態で発生するイベントに基づいて異なるスタイルブロックを提供することができます。

The_ehTが正しい場合は、目的のプラグインを使用するにはコンパイル済みのCSSを提供する必要があります。