CODEWITHSUNDEEP
webpackstylusangular-cli
eekboom
eekboom

Reputation: 5802

angular 2, angular-cli: How to enable relative paths for stylus?

As a starting point for the port of our angular 1.5 application to angular 2, I created a project template with angular-cli:

ng new pd --style=styl

Stylus compilation works fine in principle but uses absolute paths.

My global stylus file (style.styl) looks like 

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

That "plasma.styl" is an entry point (to company-wide styles) and uses relative paths, for example (two "@requires" deep from plasma.styl):

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

when I try to build, I get this error:

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

(so it tries to resolve the URL based on the path of the global stylus.styl which is wrong)

The accepted answer here Webpack && stylus-loader incorrectly resolve url paths says to add "resolve url" to the stylus loader options.

But where the heck can I add that option in the files generated by angular-cli?

Upvotes: 2

Views: 1759

Answers (1)

eekboom
eekboom

Reputation: 5802

The webpack loaders are configured inside angular-cli. Most are contained in /angular-cli/models/webpack-build-common.js When I change lines in that file from 

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

to 

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

it works fine.

Of course, that is not a viable solution (because for my project that config file is a temporary file inside the node_modules folder).

Unfortunately angular-cli (intentionally) does not provide a way to customize the webpack config: https://github.com/angular/angular-cli/issues/1656#issuecomment-239366723

As a workaround I added code to my package.json's npm script that copies assets from the referenced stylus folder to my project (just to make the imports work). But since that was not the only problem we had with angular-cli, we have to migrate to a custom webpack build soon anyway.

Upvotes: 1

Related Questions