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＆amp; WebPack，使用Angular1.X和ES6语法，我不知道如何编写特定于页面/文件夹/控制器的 LESS ，只适用于一个模板，

我尝试了数据：{css：＆＃39;某些css网址＆＃39;}和

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

Answer 2

我很好奇，你从哪里获得该州的css财产？它不存在于API

中

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

AngularJS 1.x没有Angular2中提供的css封装功能。

如何使用ES6

2 个答案: