javascript - 如何在 AngularJS 中包含查看特定的 .less 文件

Question

我在我的项目中使用 Angular UI_Router。我想加载特定状态的特定 .less 文件。我尝试使用 Angular-UI-router-styles，但它不起作用。可能是我使用 less 而不是 css。

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

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 根据每个状态中发生的事件提供不同的样式 block 。

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