Stylus：为什么 stdin 在使用 require 时会产生不同的结果？答案

【问题标题】：Stylus: why does stdin produce a different result when using require?Stylus：为什么 stdin 在使用 require 时会产生不同的结果？
【发布时间】：2015-06-30 11:02:05
【问题描述】：

我正在尝试将npm 用作我的task manager，但我注意到Stylus CLI 有一些我不理解的奇怪之处。

要在文件上运行Stylus CLI，我有两个选择。
$ stylus styles/file.styl // basic
$ stylus < styles/file.styl // using stdin

在 file.styl 中，我使用 @require 包含其他一些带有通配符的文件夹，以获取文件夹内的所有文件。

@charset "UTF-8";

@require 'base/*';
@require 'modules/*';
@require 'theme/*';

所以，当我运行$ stylus styles/file.styl 时，它都运行正常，但如果我运行$ stylus < styles/file.styl，我会得到一个错误。

我可以通过更改我的样式文件中的@require 调用来使其工作，如下所示：

@charset "UTF-8";

@require 'styles/base/*';
@require 'styles/modules/*';
@require 'styles/theme/*';

但我不知道为什么会这样以及如何修复它以便可以通过命令行运行它。

我们的目标是让它在 CLI 中正常工作，这样我就可以在我的 package.json 中使用它，并将它传递给其他任务，例如 autoprefixer 和 combine-mq 或 css-pleeease。我正在尝试复制我在同一个项目中使用的gulpfile.js，希望这能让我了解整个过程。

谢谢

更新：我还应该包含package.json 作为参考，看看我最终的结果。这也设置了我要发布的答案。

{
  "name": "npm_BUILD",
  "version": "1.0.0",
  "description": "npm as a task manager",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "styles":"npm run styles:max && npm run styles:min",
    "styles:max": "stylus < styles/site.styl | autoprefixer -b 'last 2 versions' > styles/final.css",
    "styles:min": "cssmin < styles/final.css > styles/final.min.css"
  },
  "author": "Jason Lydon @bushwa",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^5.1.1",
    "clean-css": "^3.2.2",
    "combine-mq": "^0.8.1",
    "concat": "^1.0.0",
    "cssmin": "^0.4.3",
    "filesize": "^3.1.2",
    "stylus": "^0.50.0"
  }
}

然后我运行 $ npm run styles 创建两个 css 文件，第二个被缩小。

【问题讨论】：

标签： node.js npm stylus package.json

【解决方案1】：

这与 stylus 是否知道顶级输入文件的文件系统路径有关。当您将路径传递给styles/file.styl 时，它会将require 调用解释为相对于styles/file.styl 文件，一切都很好。当您通过管道传输到标准输入时，stylus 只知道您在 shell 中的当前工作目录，因此它会解释相对于该目录的相对路径，在您的情况下是 styles 的父目录。如果你是cd styles，那么它可能会双向工作。

我的建议是使用相对于顶级 .styl 文件的路径，因为这非常合理，只需确保在运行 stylus 之前将 cd 放入该目录即可。

【讨论】：

感谢您的评论。它实际上让我尝试了一些疯狂的东西。有关更多信息，请参阅我的答案...

【解决方案2】：

我不确定这是否是最佳答案，但这对我有用...

因此，根据 Peter Lyon 的回答，我更新了 package.json 中的命令，首先跳转到样式目录，然后运行！

stylus < styles/site.styl | autoprefixer -b 'last 2 versions' > styles/final.css
变成了
cd styles && stylus < site.styl | autoprefixer -b 'last 2 versions' > final.css

{
  "name": "npm_BUILD",
  "version": "1.0.0",
  "description": "npm as a task manager",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "styles":"npm run styles:max && npm run styles:min",
    "styles:max": "cd styles && stylus < site.styl | autoprefixer -b 'last 2 versions' > final.css",
    "styles:min": "cssmin < styles/final.css > styles/final.min.css"
  },
  "author": "Jason Lydon @bushwa",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^5.1.1",
    "clean-css": "^3.2.2",
    "combine-mq": "^0.8.1",
    "concat": "^1.0.0",
    "cssmin": "^0.4.3",
    "filesize": "^3.1.2",
    "stylus": "^0.50.0"
  }
}

我不会撒谎，这让我很开心。

【讨论】：