(publicPath) Problem with CSS url path when I add publicPath(deployUrl) in angular-cli.json

[changLiuUNSW]

Hi,

this is my directory:

|-src
 |-app
 |- assets
 |-svg
 |-more.svg
 |-environments
 |-index.html
 |-styles.scss
....

I add "deployUrl": "client/dist/", to my angular-cli.json.

I have following CSS in the styles.scss:

.more {
 background: url("./assets/svg/more.svg");
 float: right;
 height: 24px;
 margin-top: 12px;
 width: 24px;
}

After I run ng build , it will translate to:

.more {
 background: url("client/dist/more.svg");
 float: right;
 height: 24px;
 margin-top: 12px;
 width: 24px;
}

When I load my application, the background SVG will be loaded from wrong path:
http://www.xxxx.com/MyApplication/client/dist/client/dist/more.svg

The correct Path should be:
http://www.xxxx.com/MyApplication/client/dist/more.svg

I can do a quick fix by overriding the publicPath setting of ExtractTextPlugin

if (stylePaths.length > 0) {
 // load global css as css files
 cssLoaders.push(...baseRules.map(({test, loaders}) => ({
 include: stylePaths, test, loaders: ExtractTextPlugin.extract({
 remove: false,
 loader: ['css-loader', ...commonLoaders, ...loaders],
 fallbackLoader: 'style-loader',
 publicPath: ''
 })
 })));
 }

Does anyone have the same issue or have a better fix for this?

[changLiuUNSW]

It will also break url path for font-awesome when added like:

"styles": [
 "styles.css",
 "../node_modules/font-awesome/css/font-awesome.css"
]

[changLiuUNSW]

Same issue webpack/css-loader#234

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}