Closed
Description
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?