I am using Visual Studio 2022. I have a Blazor server application that I created about a year and a half ago in .net5. I recently converted it to .net6 although I did not change any of the code. I simply changed the target framework and it has all been working fine. I never used CSS Isolation when it was .net5 but I want to use it now. I created a .css file (CheckInQuestion.razor.css) for one of my .razor files (CheckInQuestion.razor) and added the link reference for the scoped css file to my _host.cshtml file at the bottom of the section.
<link href="Hub.App.styles.css" rel="stylesheet">
I can see the scoped css file in the obj folder like I would expect
When I run the application, the html elements in the component have the scope reference as well.
However, the css file cannot be found so it does not apply the css.
Incidentally, I created a new Blazor .net6.0 project using Visual Studio 2022 and the CSS isolation works exactly how it is supposed to.
Anyone have any suggestions as to what is preventing my application from finding the scoped css file when I run it? It does not work on localhost or my development server.
Related
I am new to Visual Studio 2019 and I am having a bit of a problem with my CSS stylesheet location. I am using the Peachpie.App NuGet and everything works perfectly when I run the Debug (F5) with the correct stylesheet being used but if I run the compiled application executable I loose all of the CSS formatting. I assume I have got the style.css file in the wrong location for the compiling process to pick it up but I don't know how to resolve that, can anyone provide some advice on this?
Thanks,
Gerry
I manually copied the style.css file to the "\bin\Release\net5.0\wwwroot" directory and it resolved the problem but I should have expected that that would have been down during the Build process.
All my colleagues work on Visual Studio (me too before one week), but I switched to Rider. After setup my project I setup file watcher to compile SCSS to CSS.
But I have weird issue when I change something in my SCSS file everything compiles to CSS file, but my page stays the same and doesn't get newly created code from CSS. In Visual Studio we use web compiler and it works great: after any change browser refreshes and get new code.
What do I need to do to use file watcher like web compiler? I really like Rider and didn't want to go back to Visual Studio.
My Eclipse project uses Sass. When running in debug mode, sass:watch (configured per this article) correctly polls for changes to *.scss files, compiles them into CSS and places them in the target directory. However, these changes are not reflected on the page, and inspecting the page using Chrome developer tools shows the new CSS is not picked up.
Using another (CSS-only) project works as expected: any change to CSS is copied to target directory, and a refresh of the page reflects the proper change.
I ran across a similar issue someone had using LESS. Unlike that situation, though, even changing the target CSS directly, the change is not reflected in the browser.
I can't be the only person debugging Sass/CSS in Eclipse, but I can't find any info on this problem.
Any ideas on how to fix this?
EDIT: SCSS is being compiled to CSS and copied to the target build directory, but not into the Tomcat deployment where the code is running. As I've said, this is not an issue with CSS-based projects, only with this where it's a compiled file.
Solved the problem...
An entry needed to be added to Eclipse’s Web Deployment Assembly so that Eclipse would see this dynamically-generated folder and associate it with the project.
The files were being generated to the local_repo/target/branch_name directory, where branch_name was dynamic, and dependent upon what branch you were working on; this made it impossible to create a static entry in Eclipse WDA for us.
Our solution was to have Maven (1) create a sass-generated/css directory under local_repo/target, and (2) copy the css over into the branch_name/static directory where it belongs.
Now, when debugging locally and running Sass Watch, changes to *.scss files are detected, compiled to css, and deployed to the sass-generated/css directory. Since this dir is associated with the project in Eclipse WDA, Eclipse sees the change and deploys it to Tomcat as expected!
I have recently upgraded to VS2012 and have a small issue. All our sass files are checked into source control and the corresponding css file gets generated when the project is built (the css file is never part of source control). with VS2012, as soon as i edit the sass file, a css file is created under the sass file (nested under it) and the project file is checked out. I do not want this as we don't need to check in the css file.
Is there an option i can set to avoid this ? Had a quick look under tools ->options but didnt see anything
The only plugin we have installed is Mindscape Web Workbench free version.
Thank you for any advice.
So the Web Workbench plugin was automatically modifying the project file and including the following under my scss files. This was still present even when i disabled and removed the plugin. There's no option to disable this function in Web Workbench, so i wont be using it anymore.
<Compile>True</Compile>
<Minify>True</Minify>
<CompileStyle>Nested</CompileStyle>
<DebugInfo>False</DebugInfo>
Using SassyStudio now which is nice and simple.Has the option to disable auto css creation and project adding etc.
Hope this explanation can help someone else.
My team and I are currently developing an application for both Android and iOS using ASP.NET MVC 4, HTML5, and PhoneGap. The development works perfectly fine; however, one question remains unanswered: What is the recommended approach to generate the three files PhoneGap needs (one HTML page, one JavaScript file, and one CSS stylesheet) from our MVC solution?
Would you recommend using a Razor template-based approach? Or would you simply automatically copy the output HTML source after each build? Or would you suggest something completely else?
This morning, we decided to let ASP.NET MVC render a single view containing all our application's HTML which references several JavaScript files and CSS stylesheets. We then automatically grab the rendered HTML source and copy an index.html into a certain export folder on our local machine. That folder is ready to be deployed because it contains only one HTML file and additional JavaScript and CSS resources – exactly what PhoneGap expects.