如何使用 ES6 以角度编写特定于控制器/页面的 LESS答案

【问题标题】：How to write LESS specific to a controller/page in angular with ES6如何使用 ES6 以角度编写特定于控制器/页面的 LESS
【发布时间】：2016-06-17 01:50:30
【问题描述】：

在 Angular 2 中，我们有 styleUrls，在 Angular 1.X 中，我们有这样的东西：

app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/some/route/1', {
            templateUrl: 'partials/partial1.html', 
            controller: 'Partial1Ctrl',
            css: 'css/partial1.css'
        })
        .when('/some/route/2', {
            templateUrl: 'partials/partial2.html',
            controller: 'Partial2Ctrl'
        })
        .when('/some/route/3', {
            templateUrl: 'partials/partial3.html',
            controller: 'Partial3Ctrl',
            css: ['css/partial3_1.css','css/partial3_2.css']
        })
}]);

但是使用 BabelJS 和 WebPack，它使用 Angular1.X 和 ES6 语法，我不知道如何编写特定于页面/文件夹/控制器的 LESS，它只适用于一个模板,

我尝试了数据：{ css : 'some css url'} 和

export default function routes($stateProvider) {
  'ngInject';
  $stateProvider
    .state('content', {
      url: '/content/:appId/:template/:device',
      template: require('./content.html'),
      controller: ContentController,
      controllerAs: 'content',
      css: './content.less'
    });
}

还是不行。

请告知，如果您需要更多信息，请告诉我。

【问题讨论】：

我的理解是，less 必须在可用之前编译成实际的 css。所以指向输出 css。
@AmyBlankenship 试过了，不行

标签： javascript css angularjs ecmascript-6 webpack

【解决方案1】：

我很好奇，你从哪里得到状态的css 属性？它在 API 中不存在

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider

AngularJS 1.x 没有 Angular2 中可用的 css 封装功能。

【讨论】：

他们可能正在使用Angular Route Styles。我错过了他们没有使用 ng-route。他们可能需要修改 Angular 路由样式以监听可用的任何事件。请注意，这更像是评论而不是答案，所以我不赞成。如果你删除它，我想我们俩都会找回代表。
在问题中，原始发布者使用$stateProvider 创建路线。这是uiRouter 的一部分，而不是ngRouter。 angular-route-styles 与ngRouter 集成，但不与uiRouter 集成。所以我的回答仍然正确无误。
我没有说它不成立或不正确。这不是一个答案——它是一个问题。所以它需要是一个评论，要求用户澄清他们的问题。

【解决方案2】：

如果您要使用 less 预处理器编写样式，您应该先构建它们，然后在路由配置中使用输出文件名。

如果你使用的是 Webpack，它看起来像：

module.exports = {
  entry: {
    app: './src/app.js', //don't forget to build your js
    partial1: './src/partials/partial1.less',
    partial2: './src/partials/partial2.less',
    // and so on ...
  },
};

生成的文件将在您的输出目录中。您应该指向它们的链接：

$routeProvider
    .when('/some/route/1', {
        templateUrl: 'partials/partial1.html', 
        controller: 'Partial1Ctrl',
        css: 'partial1.css'
    })

【讨论】：