Question

我正在使用SystemJS处理Angular 2 Projekt，并使用less来为我的组件设置样式。

我从角度2的快速入门教程开始，然后更改为更少的文件。

systemjs.config.js

(function () {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            // ...
            'css': 'npm:systemjs-plugin-css',
            'less': 'npm:systemjs-plugin-less',
            'lesscss': 'npm:less'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },

            lesscss: {
                main: {
                    browser: './dist/less.min.js',
                    node: '@node/less'
                }
            },
            css: {
                main: 'css.js'
            },
            less: {
                main: 'less.js'
            }
        },
        meta: {
            '*.less': { loader: 'less' }
        }
    });
})(this);

我安装了less插件，文件正在加载，但是我收到错误：

错误：（SystemJS）预期＆＃39;样式＆＃39;是一个字符串数组。

login.component.ts

import { Component }    from '@angular/core';
import { Router }       from '@angular/router';

import { DwhService }   from '../../theme/services/dwh.service'

@Component({
    moduleId: module.id,
    selector: 'login',
    templateUrl: 'login.component.html',
    styles: [require('./login.component.less')]
})

export class LoginComponent implements OnInit {

    user: string = "";
    password: string = "";

    loginPattern:Object = {

    };

    loginData:Object = {};

    constructor(public dwhService:DwhService, public router: Router){

    }

    ngOnInit() : void {
        this.dwhService.json(this.loginPattern).toPromise().then(ret => {
            $.extend(true, this.loginData, ret);
        });
    }

    login():void{
        // ...
    }
}

我找到了解决方法，但是可以为less / css文件设置加载器吗？我不想将String（）添加到所有* .less导入：

styles：[String（require（＆＃39; ./ login.component.less＆＃39;））]

Answer 1

如果您使用SystemJS，

styleUrls应该能够加载相对链接。

@Component({
    moduleId: module.id,
    selector: 'login',
    templateUrl: 'login.component.html',
    styleUrls: ['./login.component.less']
})

加载较少文件时出现Angular 2错误

1 个答案: