Closed phatakrajan closed 5 years ago
@phatakrajan add the custom assets folder to your webpack.config.js as follows:
new CopyWebpackPlugin([
{ from: "images/**" }, // HERE
{ from: "fonts/**" },
{ from: "**/*.jpg" },
{ from: "**/*.png" },
]
Then remove the platforms
folder and rebuild.
@NickIliev Do I need to add any entries for dark.css? Sorry my knowledge on webpack is very limited and my problem is still unresolved
@phatakrajan try using the import instead of addCssFile
For example
/* Import shared style rules */
@import './dark.css';
Of course the path may differ depending on where you are using the import
I am having a similar issue. The code works on native playground but not on the local build after I download it. SO WEIRD.
I have fixed this with the following change:
login.component.css
FlexboxLayout {
justify-content: center;
align-items: center;
background-size: cover;
background-image: url("~/app/images/background.jpg");
}
webpack.config.js
new CopyWebpackPlugin([
{ from: { glob: "images/**" } }, // images folder
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
@phatakrajan were you able to resolve your issue?
@NickIliev Yes. It is resolved
Environment Android
package.json
webpack
Describe the bug We have added following style and related image for a page background in dark.css present at the level of app.css
.page-theme { background-image: url("~/app/images/background.png"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }
We are loading this file by calling following function this.page.addCssFile("./dark.css");
To Reproduce
Expected behavior
This code works fine when we build project without bundling. When i bundle and debug, i don't see the new custom css as well as the image folder that we have added in project. Here is our project hierarchy
|- src |-----app |---------app.css |---------dark.css |---------images |--------------background.png |---------modules |------------login |----------------login.component.ts |----------------login.component.css |----------------login.component.html