I am having a dickens of a time getting the default styles of certain components (namely buttons with icons and dialogs) to display when compiled with Webpack 4 (using the MiniCssExtractPlugin in place of the ExtractTextPlugin.
Has anyone else found this to be the case when upgrading to Webpack 4?
annotated screenshot
Related
I have attempted many times to customize antd theme by using webpack configuration but is not working, I have tried to do this with antd any know the solution please tell me. I don't want to use craco craco-less whatever I want to stay with original react script
I started creating an ASP.NET (4.5.1) MVC project in VS2019 by following a tutorial. It is quite straight forward creating the HomeController and an Index View file. Files have not been changed so far. After compiling and opening in IE and FF I do not see the grey bar at the very top compared to the displayed one in the video tutorial. Instead, there is just a very small icon left to the "Application name" hyperlink but there should be a grey bar (div-element) wrapping "Application name" hyperlink and stretch from the very left to the very right.
Screenshot how it looks on my device and web browsers.
Screenshot how it should look like based on the video tutorial
It is for sure not critical at this stage but really wondering.
Does somebody know what is maybe missing / misconfigured?
I already searched web but there are thousands of other results being displayed.
Thanks
Best regards
I believe I found the issue. Bootstrap has not been installed as NuGet package. Therefore, I guess bootstrap 4 or 5 are used by default since bootstrap 3 is not supported anymore. By manually installing bootstrap 3 NuGet package, it perfectly works as expected. By updating to version 4 and 5, it breaks.
Recently I started a ASP.NET Core-Web-App (MVC) .NET.Core 3.1 project and noticed that the bootstrap stylesheets, that were automatically generated in the folder wwwroot/lib/bootstrap/dist/css/, have different versions:
bootstrap.css (v3.4.1)
bootstrap-theme.css (v3.4.1)
bootstrap-grid.css (v4.3.1)
bootstrap-reboot.css (v4.3.1)
Why are versions 3 and 4 thrown together?
Can I just delete the contents of the bootstrap folder and replace
it with bootstrap 4 or 5?
To answer your question, yes you can delete these and just replace the files and their corresponding references with whatever bootstrap version you like.
If that is the case and it doesn't work correctly for you, you can update it manually
Right click on wwwroot => Add => Client Side Library
Type "bootstrap" in the search box
Choose specific files of the version you want and click "Install".
I am using angular 10 and angular material 10.
the angular material dialogue is not working in the production build (ng serve --prod and ng build --prod) but It is working fine local dev environment (ng serve)
I have already added the component in the entryComponents and bootstrap
It is not throwing any kind of error in the console. what I can see is the card is loaded and no components inside the dialog are available,
You can see the below screenshot, which is loading the card but not any component inside it.
After a lot of research I found, the problem is with the IVY engine. For some people changing the below can solve the problem.
tsconfig.json
"angularCompilerOptions": {
"enableIvy": true
},
If you want to use the Ivy engine. the problem will be resolved if you update the Angular 10 project to Angular 11.
I am getting the following error in my Angular 6 app
Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
I have imported the following theme in my app.component.css but I am still getting this error on browser's console
#import url("../../node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css");
Note the following statement about using pre-built themes in the guide:
If you're using Angular CLI, this is as simple as including one line in your styles.css file
You should have the import statement in your application's main stylesheet - styles.css - not in app.component.css. Also, note another statement in the guide:
The actual path will depend on your server setup.