css - Stylus 重新编译与 Ember-cli 不一致

Question

我正在尝试将 Stylus 合并到一个基于 Ember-cli 的元素中。在“ember s”上，stylus 正在根据需要编译 app.styl 和所有导入的样式表，但在运行时会经常失败，并且在收到更改时不一致地重新编译。

版本；

• Ember-cli 0.0.46
• Node 0.10.32
• NPM 1.5.0-alpha-4

app/styles/app.styl;

@import "reset";
@import "config";
@import "site-header";
@import "site-footer";
@import "login-bar";

body {
  color: white;
}

每个导入的 styl 文件也在“app/styles/”文件夹中。

package.json;

"devDependencies": {
  "body-parser": "^1.2.0",
  "broccoli-asset-rev": "0.1.1",
  "broccoli-ember-hbs-template-compiler": "^1.6.1",
  "broccoli-merge-trees": "^0.1.4",
  "broccoli-stylus-single": "~0.3.0",
  "ember-cli": "0.0.46",
  "ember-cli-ic-ajax": "0.1.1",
  "ember-cli-inject-live-reload": "^1.0.2",
  "ember-cli-qunit": "0.1.0",
  "ember-data": "1.0.0-beta.10",
  "express": "^4.8.5",
  "glob": "^4.0.5"
}

如果我对 app.styl 进行更改，Ember-cli 将识别这一点，并相应地重新构建和更新 asset/project_name.css 文件。但是，如果更改 app.styl 的导入子项(例如“site-footer”)，Ember-cli 将不一致地按预期重新构建和更新 .css。它通常适用于第一次尝试，然后忽略所有进一步的更改(在任何子样式上)。

唯一的解决方案是终止并重新运行“ember s”。

附加信息

我试图通过更改默认值来在 Brocfile.js 中强制重新编译...

// Ember
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();

module.exports = app.toTree();

.. 到以下...

// Ember
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();

// Stylus
var mergeTrees = require('broccoli-merge-trees');
var compiledStylus = require('broccoli-stylus-single');
var stylus = compiledStylus(['app/styles'], 'app.styl', 'assets/project_name.css', {
  'include css': true,
  'compress': true,
});

module.exports = mergeTrees([app.toTree(), stylus], { overwrite: true });

.. 这只会导致相同的问题重复出现，发现文件更改两次但结果相同。

Answer 1

问题出在 Stylus 缓存上，通过更改 .. 修复。

node_modules/broccoli-stylus-single/index.js(第 35 行)；

var stylusOptions = {
  filename: includePathSearcher.findFileSync(self.inputFile, includePaths),
  paths: includePaths,
  cache: false,
}

或者可以通过 brocfile 中的选项参数手动修复。