Angular SystemJS Less

Question

我正在使用Angular 5开发ASP.NET MVC5单页应用程序。我需要Angular来理解更少的文件。

我有systemjs.config.js文件：

    (function (global) {
        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': 'src/app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            // other libraries
           'rxjs': 'npm:rxjs',
           'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',

          // less
          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: {
            defaultExtension: 'js',
            meta: {
                './*.js': {
                    loader: '/src/systemjs-angular-loader.js'
                }
            }
        },
        rxjs: {
            defaultExtension: 'js'
        },

        // less
        lesscss: {
            main: {
                browser: './dist/less.min.js',
                node: '@node/less'
            }
        },
        css: { main: 'css.js' },
        less: { main: 'less.js' }
    },

    meta: {
        '*.less': { loader: 'less' }
    }
});
    })(this);

app.component.ts文件：

     import { Component } from '@angular/core';
     @Component({
        selector: 'my-app',
        template: `<h1 class="style1">Hello {{name}}</h1>`,
        //styleUrls: ['./app.component.css']
        styleUrls: ['./app.component.less']
     })
     export class AppComponent { name = 'Angular'; }

app.component.less文件：

     @color1: red;

    .style1 {
        color: @color1;
    }

看起来一切都符合文档，但样式不起作用。如何让Angular理解更少的文件？

Answer 1

我找到的解决方案是使用Visual Studio的Web编译器扩展，并将LESS和SCSS编译为CSS，使用CSS。