Question

作为角度为1.5的角度为1.5的端口的起点，我创建了一个带有angular-cli的项目模板：

ng new pd --style=styl

Stylus编译原则上运行良好，但使用绝对路径。

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

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

那＆＃34; plasma.styl＆＃34;是一个入口点（对于公司范围的样式）并使用相对路径，例如（两个＆＃34; @要求＆＃34;深度来自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表示要添加＆＃34;解析网址＆＃34;到手写笔加载器选项。

但是，我可以在angular-cli生成的文件中添加该选项吗？

Answer 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构建。

angular 2，angular-cli：如何启用手写笔的相对路径？

1 个答案: