angular 2, angular-cli：如何启用触控笔的相对路径？答案

【问题标题】：angular 2, angular-cli: How to enable relative paths for stylus?angular 2, angular-cli：如何启用触控笔的相对路径？
【发布时间】：2016-10-06 10:18:03
【问题描述】：

作为将 angular 1.5 应用程序移植到 angular 2 的起点，我使用 angular-cli 创建了一个项目模板：

ng new pd --style=styl

Stylus 编译原则上可以正常工作，但使用的是绝对路径。

我的全局手写笔文件（style.styl）看起来像

@require "~@mgm-a12/plasma-design/stylus/plasma.styl"

“plasma.styl”是一个入口点（通向公司范围的样式）并使用相对路径，例如（两个“@requires”来自plasma.styl）：

background url("../assets/img/sprite.png") no-repeat

当我尝试构建时，我收到此错误：

ModuleNotFoundError: Module not found: Error: Can't resolve
'../assets/img/sprite.png'
in '.../pd/src'
at .../pd/node_modules/webpack/lib/Compilation.js:229:38

（所以它会尝试根据全局 stylus.styl 的路径来解析 URL，这是错误的）

这里接受的答案Webpack && stylus-loader incorrectly resolve url paths 说要在手写笔加载器选项中添加“解析 url”。

但是我到底可以在 angular-cli 生成的文件中添加该选项在哪里？

【问题讨论】：

我也遇到了 angular-cli 和手写笔的问题。你能告诉我你是如何解决你的问题的吗？
我还没有解决这个问题。我只是不再使用 angular-cli。

标签： webpack stylus angular-cli

【解决方案1】：

webpack 加载器在 angular-cli 中配置。大多数都包含在 /angular-cli/models/webpack-build-common.js 当我从

更改该文件中的行时

loaders: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']

到

loaders: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader?resolve url']

效果很好。

当然，这不是一个可行的解决方案（因为对于我的项目，配置文件是 node_modules 文件夹中的临时文件）。

不幸的是，angular-cli（故意）不提供自定义 webpack 配置的方法：https://github.com/angular/angular-cli/issues/1656#issuecomment-239366723

作为一种解决方法，我在 package.json 的 npm 脚本中添加了代码，该脚本将资产从引用的 stylus 文件夹复制到我的项目中（只是为了使导入工作）。但由于这不是我们在使用 angular-cli 时遇到的唯一问题，所以无论如何我们都必须尽快迁移到自定义 webpack 构建。

【讨论】：