javascript - 如何使用 ES6 以 Angular 编写特定于 Controller /页面的 LESS

Question

在 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 语法)，我不知道如何编写特定于页面/文件夹/ Controller 的 LESS ，仅适用于一个模板,

我尝试了 data: { 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'
    });
}

还是没用。

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

Answer 1

如果您要使用 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'
    })