Угловая системаJS Меньше

Question

Я занимаюсь разработкой одностраничного приложения ASP.NET MVC 5 с использованием Angular 5. Мне нужен Angular, чтобы понимать файлы Less.

У меня есть файл 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 и компилировать LESS и SCSS в CSS, использовать CSS.