Question

我正在使用带有Angular2的SystemJS。我已经安装了较少的systemjs插件： https://github.com/systemjs/plugin-less/blob/master/README.md

我加载的文件较少，但解释的语法较少（例如颜色别名）。这是我的systemjs.config.js

(function (global) {
    SystemJS.config({
        baseURL: '/', 
        paths:
        {
            'npm:': 'node_modules/'
        },    
    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: true
    },    
    map: {
      app: 'app',
      'main':                       'main.js',

      // 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',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.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',
      'ts':                        'npm:plugin-typescript/lib/plugin.js',
      'typescript': 'npm:typescript/lib/typescript.js',
        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/core': { main: 'index' },
      'app/models': { main: 'index' },
      'api': { defaultExtension: 'js' },
      app: {
        main: './main.ts',
        defaultExtension: 'ts'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      lesscss: {
          main: {
              browser: './dist/less.min.js',
              node: '@node/less'
          }
      },
      css: {
          main: 'css.js'
      },
      less: {
          main: 'less.js'
      }
    },
    meta: {
        'typescript': {
            "exports": "ts"
        },
        '*.less': { loader: 'less' }
    }

  });
})(this);

这是我的组成部分：

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

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

}

我在index.html中的SystemJS导入

<script>            
    SystemJS.import('systemjs.config.js')
        .then(function () {
            SystemJS.import('main');
        })
            .catch(console.error.bind(console));            

    </script>

如果我在index.html中导入我的less文件，它可以工作：SystemJS.import（＆＃39; ./ app / profile / profile.less！less＆＃39;）; 所以我猜这个插件有效。

但我不认为应该这样做，systemjs.config.js中的元配置是为了避免我们指定每个文件，对吧？

stylePr：myUrls：[＆＃39; profile.less＆＃39;]在我的组件ts文件中也有效，因为我看到使用了css，但忽略了文件的较少部分（如变量）。

谢谢

SystemJS不会自动处理更少的文件（Angular2）

0 个答案: