(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-contrib/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.}