如何在AngularJS中包含视图特定的无文件

我在我的项目中使用了角度UI_Router。我想为特定状态加载特定的.less文件。我尝试过使用angular-UI-router-style，但它不起作用。可能是使用较少而不是css。如何在AngularJS中包含视图特定的无文件

请检查我的代码。我正在使用angular-ui-router-styles将css添加到路由中。它正在工作，但页面的样式不反映。

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');

来源

2016-08-03 Kishan

'LESS'是一个css预处理程序。在使用html之前，您需要编译为CSS。 –

，我所知道的实现，这将是使用Webpack或类似的建设的唯一途径。这样你可以在组件/指令中使用require('./state-1.less')。这个想法是，webpack只包含需要的文件。实际上，如果你已经开始，建立一个新的编译工具/任务运行器并不简单。

在为您的应用程序提供所有CSS方面没有任何问题。如果切换是您的任务，那么您可以使用ngclass根据每个状态中发生的事件提供不同的样式块。

The_ehT是正确的，如果你想使用所需的插件，你需要提供编译后的CSS。

来源

2016-08-03 09:29:13 zilj

如何在AngularJS中包含视图特定的无文件

回答

相关问题