使用角度2,角度CLI和西兰花设置lesscss

时间:2016-07-19 21:36:38

标签: angular less angular-cli broccolijs

我正在尝试使用 angular 2 angular CLI 西兰花设置 lesscss

我在角度CLI的github https://github.com/angular/angular-cli/issues/873

上打开了一个问题

如果我的项目安装了less,我会系统地收到以下错误:

ng build 
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Build failed.
File: input (1029)
The Broccoli Plugin: [LESSPlugin] failed with:
undefined

The broccoli plugin was instantiated at: 
    at LESSPlugin.Plugin (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/broccoli-plugin/index.js:10:31)
    at LESSPlugin.CachingWriter [as constructor] (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at new LESSPlugin (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/lib/broccoli/angular-broccoli-less.js:21:12)
    at Object.Plugin.build.compile.exports.makeBroccoliTree (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/lib/broccoli/angular-broccoli-less.js:52:12)
    at Angular2App._buildTree (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/lib/broccoli/angular2-app.js:133:27)
    at new Angular2App (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/julien/Documents/projects/bignibou/bignibou-client/angular-cli-build.js:10:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
    at /Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
    at lib$rsvp$$internal$$tryCatch (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

这是我的 angular-cli-build.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function (defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'ng2-bootstrap/**/*',
      'ng2-translate/**/*.+(js|js.map)',
      'angular2-moment/**/*.+(js|js.map)',
      'moment/**/*.+(js|js.map)'
    ],
    lessCompiler: {
      'paths': [__dirname + '/src']
    }
  });
};

此外,我不确定从何处以及如何从Bootstrap css框架导入/包含较少的源文件。

这是我的 index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bignibou Client</title>
  <base href="/">

  <!--TODO: remove once ng CLI less plugin works-->
  <link rel="stylesheet" href="assets/styles/style.css"/>

  {{#unless environment.production}}
  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
  {{/unless}}
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<main>Loading...</main>

{{#each scripts.polyfills}}
<script src="{{.}}"></script>
{{/each}}
<script>
  System.import('system-config.js').then(function () {
    System.import('main');
  }).catch(console.error.bind(console));
</script>



</body>
</html>

有人可以帮忙吗?

0 个答案:

没有答案