Repository navigation
(publicPath) Problem with CSS url path when I add publicPath(deployUrl) in angular-cli.json #4035
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?
Activity
[-]problem with CSS url path when I add deployUrl in angular-cli.json (publicPath)[/-][+](publicPath) problem with CSS url path when I add deployUrl in angular-cli.json[/+][-](publicPath) problem with CSS url path when I add deployUrl in angular-cli.json[/-][+](publicPath) Problem with CSS url path when I add deployUrl in angular-cli.json[/+][-](publicPath) Problem with CSS url path when I add deployUrl in angular-cli.json[/-][+](publicPath) Problem with CSS url path when I add publicPath(deployUrl) in angular-cli.json[/+]changLiuUNSW commentedon Jan 16, 2017
It will also break
urlpath forfont-awesomewhen added like:changLiuUNSW commentedon Jan 16, 2017
Same issue webpack/css-loader#234
angular-automatic-lock-bot commentedon Sep 6, 2019
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.