I have a Blazor server app with a client project. In the client project, I have a bunch of pages and components. Adding a file with the same name as the razor page with the CSS extension worked so far to create scoped CSS files… But somehow not anymore.
I added a new page under the page's folder. Named Historia.razor. Added a Historia.razor.css file in the same folder. Visual Studio understands it nicely and nests the CSS page under the main razor file.
But when compiling and running the app, the styles do not appear. I checked the combined CSS file (MyApp.styles.css) and there are no entries from the Historia.razor.css file. Also checked the styles on the generated page and they don't contain the b-213321 extra ID on the class names.
I checked the project file to ensure the file is not under the "ignore", It is not. This is what the project file looks like:
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Blazored.Toast" Version="3.2.2" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.3" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.3" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="6.0.3" />
</ItemGroup>
<ItemGroup>
<Watch Include="**\*.razor" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\Shared\VikingBoardGames.Shared.csproj" />
</ItemGroup>
</Project>
Once again, it DOES WORK for other components and pages that I added in the past and follows the same exact folder/naming structure.
Any ideas on what is preventing the CSS to be bundled with the rest?
NOTE: After doing a clean - build -delete .vs folder - restart VS as suggested by Henk Holterman my tags do show the b-312412wgz code. But still, the styles are not applied and the CSS content is not added to the myproject.styles.css file.
I tried also to create a new file, with its CSS file. Exactly the same behavior.
Whenever things don't work as they should, the following steps might help:
Do a Build|Clean Solution
Close VS
In the Solution folder, delete the .vs folder
Reopen the Project and do a Build|Rebuild
and in case of a Web App,
Use Ctrl+F5 to force refresh all files
With the Dev tools (F12), go to the Application tab and clean the Cache and Local storage.
Cross your fingers and try again.
Related
Looking to get the following setup going:
I'm working on a Blazor app, and with the official css isolation bundler. I'm using Less though, and installed a Less transformer which creates the required css on build.
However, running my app via dotnet watch run, it often ends up in an endless loop now.
The reason for this is probably that dotnet watch run sees a change in the *.razor.css files, rebuilds, and the cycle just repeats on and on.
So here's my question:
How can I configure my csproj (new Net Standard format) to exclude **\*.razor.css from the watch process? It would also be fine it it just disappears from my VS solution as a whole.
Had a play with both answers above, but neither worked for me. I generate some files during the build and that may be why the other 2 don't work for me. According to Microsoft docs shared above (https://learn.microsoft.com/en-us/aspnet/core/tutorials/dotnet-watch?view=aspnetcore-3.1), to remove an item from watch you can also set it through the definition. Doing this worked for my scenario.
<ItemGroup>
<Content Remove="wwwroot\dist\**" />
<Content Include="wwwroot\dist\**" Watch="false" />
</ItemGroup>
I did have to add the Content Remove as otherwise the item is declared twice and the build will fail.
Please edit your .csproj file and add the following to it
<ItemGroup>
<Watch Exclude="**\*.razor.css" />
</ItemGroup>
More info at
https://learn.microsoft.com/en-us/aspnet/core/tutorials/dotnet-watch?view=aspnetcore-3.1
I had the same issue after coming here, ended up with:
<ItemGroup>
<Watch Remove="wwwroot\**\*" />
</ItemGroup>
Works nicely for me :)
I have a similar set-up except but I'm using SASS. I have a custom target to execute the command npm run sass, so the files are being generated as part of the dotnet build process, which made the watch re-trigger builds in an infinite loop.
In my case, the solution I found was like the following:
Alter the DefaultItemExcludes:
<PropertyGroup>
<DefaultItemExcludes>$(DefaultItemExcludes);Features/**/*.css</DefaultItemExcludes>
</PropertyGroup>
Adjust sure the css compilation target to run before BeforeResGen instead of Compile (which I was using before):
<Target Name="CompileScopedScss" BeforeTargets="BeforeResGen">
<Exec Command="npm run sass -- %(ScopedScssFiles.FullPath) %(RootDir)%(Directory)%(FileName).css --no-source-map" />
</Target>
Include the css file and set Watch="False":
<ItemGroup>
<Content Include="Features/**/*.css" Watch="False" />
</ItemGroup>
I do this in a target after the previous target, but it seems to work also outside it.
Just using the <Content Update... Watch="False" /> wasn't enough in my case. The <Watch Remove="..." /> didn't work either in my case and I believe it could have something to do with the fact that the files are generated during the build.
So I feel like I have come to the end of the rope here, but hoping someone knows more than I do here. I have some Typescript files, though that is mostly irrelevant as I am having this problem with all content files.
I am able to generate a nuget, or more precisely dotnet pack, nuget package that includes my content files in the package by using this in the .csproj of my parent project:
<ItemGroup>
<Content Include="Scripts\Utility.ts">
<Pack>true</Pack>
<PackagePath>contentFiles\Scripts\;content\Scripts</PackagePath>
</Content>
</ItemGroup>
I can browse the generated .nupkg and see that indeed the file was added to the package in both the content\Scripts and contentFiles\Scripts locations
The problem is that whenver I consume this package in my 'child' progect, that Typescript never gets copied into any folder of the child project, though I can see it extracted in the .nuget\packages\parent\... folders.
At first I thought it was something with my initial settings in the parent project, and it may be, but after trying what seems like everything in the book, that fails to copy the content files to the child project. I then tried going the dark path of trying to use Init.ps1 in the tools folder of my package, and though it was impossible to debug, it also seemed to run sporatically (I completely unistalled and reinstalled the package and it still failed to run most of the time.) This could be the way but I don't know why I can't get it to output to the Package Manager Console... maybe there's still hope with Init.ps1 but I can't seem to figure it out. Finally I see some potential with a nuget .targets file but I can's seem to grasp how to use it for my purpose either! I would love some feedback as to how to get this done.
From: Announcing NuGet 3.1 with Support for Universal Windows Platform
Importing content from a Nuget package was depreciated for projects using a project.json file in Nuget v3.1. Since then the project.json file has been dropped in favour of the new .csproj format. Importing content from a Nuget package should still work though if you're using the packages.config file instead.
Also mentioned is the fact that there are other package managers available for delivering content.
It looks to me like the answer in the new world is to create a node module containing utility.js and let npm deliver it to your project.
Possible Workaround:
I've looked at .targets to copy files and got this working, but it does run on each build - which may or may not be a problem for you. I can't do what I want with it.
In [PackageId].targets:
<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<!-- Either do this for all scripts in the Scripts/js folder -->
<Target Name="CopyScriptsToProject" BeforeTargets="Build">
<Message Text="Copying scripts to project" />
<ItemGroup>
<SourceScripts Include="$(MSBuildThisFileDirectory)..\..\content\Scripts\js\**\*.*"/>
</ItemGroup>
<Copy SourceFiles="#(SourceScripts)" DestinationFiles="#(SourceScripts -> '$(MSBuildProjectDirectory)\wwwroot\js\%(RecursiveDir)%(Filename)%(Extension)')" Condition="!Exists('$(MSBuildProjectDirectory)\wwwroot\js\%(RecursiveDir)%(Filename)%(Extension)')" />
</Target>
<!-- Or do this for the individual script -->
<Target Name="CopyUtilityScriptToProject" BeforeTargets="Build">
<Copy SourceFiles="$(MSBuildThisFileDirectory)..\..\content\Scripts\js\Utility.js" DestinationFiles="$(MSBuildProjectDirectory)\wwwroot\js\Utility.js" Condition="!Exists('$(MSBuildProjectDirectory)\wwwroot\js\Utility.js')" />
</Target>
</Project>
<!-- Note: condition can be removed from either if you want it to overwrite each build -->
and in the .csproj file (replacing [PackageId] with the name of your package):
<Project Sdk="Microsoft.NET.Sdk">
... any Globals for source control stuff ...
<PropertyGroup>
<TargetFramework>netcoreapp2.0</TargetFramework>
<Version>7.0.0</Version>
<PackageId>[PackageId]</PackageId>
</PropertyGroup>
... any PackageReference stuff ...
<ItemGroup Label="Packaging">
<Content Include="build\netcoreapp2.0\[PackageId].targets" PackagePath="build\netcoreapp2.0\[PackageId].targets" />
<!-- Either -->
<Content Include="Scripts\js\**\*.*" PackagePath="content\Scripts\js;contentFiles\Scripts\js" />
<!-- or -->
<Content Include="Scripts\js\Utility.js" PackagePath="content\Scripts\js;contentFiles\Scripts\js" />
</ItemGroup>
</Project>
There seemed to be a bug whereby when the <PackageId>[PackageId]</PackageId> wasn't set explicitly in the .csproj, the build targets didn't work. Although that may well be an issue with my development environment.
Apparently you need the any\any in the path (learn more) as well as to include <PackageCopyToOutput>true</PackageCopyToOutput>, like this:
<ItemGroup>
<Content Include="Scripts\js\Utility.js">
<Pack>true</Pack>
<PackagePath>contentFiles\any\any\wwwroot\js\;content\any\any\wwwroot\js\</PackagePath>
<PackageCopyToOutput>true</PackageCopyToOutput>
</Content>
</ItemGroup>
You'll also need to precompile your TypeScript before including the .js files in the package
However, this still doesn't create a file there, just some strange reference to it.
In the end, we got it working with a .targets file, you can find a working repo here: https://github.com/NuGet/Home/issues/6743
Serj Sagan's answer got me on the right track, but it wasn't sufficient to deploy the content file to the bin directory (as he noted). I was able to get the file to be deployed by changing the package reference options in the consuming project's .csproj file, as follows:
<PackageReference Include="MyNuGetPackage" Version="0.0.0.1">
<IncludeAssets>all</IncludeAssets>
<PrivateAssets>analyzers;build</PrivateAssets>
</PackageReference>
It seems like the default for PrivateAssets is contentfiles;analyzers;build (documentation), which is not what we want in this case.
Simplified code and explanation from #PurplePiranha
TL;DR:
Basic .NET6 simplified sample code on Github
Step by Step guide
Selection of the files
First we need to select all the files that needs to get into the nuget package.
Add this to the <LibraryPackageName>.csproj:
<Project Sdk="Microsoft.NET.Sdk">
...
<ItemGroup Label="Packaging">
<Content Include="<Your directory path>\<your file(s)>" />
</ItemGroup>
Multiple content lines are allowed.
Write a target
Make a target file to copy the files before (or after) the build to the bin directory:
The location and name of this file is important:
<root>\build\<LibraryPackageName>.targets
Now, make sure that it will get executed by referencing it in the <LibraryPackageName>.csproj by adding a content line:
<Project Sdk="Microsoft.NET.Sdk">
...
<ItemGroup Label="Packaging">
<Content Include="build\<LibraryPackageName>.targets" PackagePath="build\<LibraryPackageName>.targets" />
<Content Include="filesToAdd\*.txt">
<Pack>true</Pack>
</Content>
</ItemGroup>
Eg: From the code in github:
<Project Sdk="Microsoft.NET.Sdk">
...
<ItemGroup Label="Packaging">
<Content Include="build\PackageToGenerateFile.targets" PackagePath="build\PackageToGenerateFile.targets" />
<Content Include="filesToAdd/*.txt">
<Pack>true</Pack>
</Content>
</ItemGroup>
NOTE: By copying the files to the bin directory, the files are not part of your version control, but your package is!
Build and pack
In Visual Studio, right-click on the package name and select "Pack".
A new nuget package should be created in the bin directory of your library.
Use the nuget package
Install the nuget package now in your destination package.
Notice that the files are in the solution explorer, but not in a directory on your disk. They have a shortcut symbol.
Build the destination package
Check the bin directory.
The files should be copied to the location mentioned in the targets.
Context
I regularly make the mistake to forget include a vendor .css or .js to the Asp Mvc project. I just copy/download with a tool, or from a theme, and referencing them. All works locally because the files are in the virtual directory so IIS Express will server them.
When publish times come, and I publish the new version, those files which are not in the .csproj will not be deployed.
Question
Although some tools or itself the IDE creates warning in some cases if in a syntax construct I refer to a resource what is not in the .csproj, this is not all working (for example: when using BundleConfig)
It seems to be pretty simple prevent this source of errors: Just check the file system with a well picked filter and list all files what are not included in the .csproj. (the filter could be: (*.css, .js, ...) or (assets/.*)
How can I accomplish this task?
If you switch to the new .csproj format supported by Visual Studio 2017, you no longer need to add references to files in the file system, they are picked up by default and you have to exclude files that you don't want.
Migration to the new .csproj format is pretty straightforward - you can use the dotnet migrate tool to make the conversion.
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFrameworks>net47</TargetFrameworks>
</PropertyGroup>
<ItemGroup>
<ProjectReference Include="..\MyProj\MyProj.csproj" />
</ItemGroup>
<ItemGroup>
<!-- /* Exclude files you don't want */ -->
<Compile Remove="Text\AnyTransliterator.cs" />
<Compile Remove="Text\BreakTransliterator.cs" />
</ItemGroup>
</Project>
If you have files outside of your project directory that you want to include, you can create a link to a file or directory.
<!-- /* Link to an individual file outside of the project */ -->
<Content Include="..\..\..\Assets\something.css" Link="Assets\something.css" />
<!-- /* Create a virtual directory in Visual Studio named Assets
and link to external Assets directory. All files in that
directory will be included in the project */ -->
<Content Include="..\..\..\Assets\**\*" LinkBase="Assets" />
<!-- /* Create a virtual directory in Visual Studio named Assets
and link to external Assets directory. Only .css files in that
directory will be included in the project */ -->
<Content Include="..\..\..\Assets\**\*.css" LinkBase="Assets" />
This works with .NET Framework, but do note that you need to install the .NET Core SDK 2.0.0 in addition to VS 2017 15.3 (and ensure no global.json selects a lower SDK version) for the LinkBase option to work.
Reference: New .csproj format - How to specify entire directory as "linked file" to a subdirectory?
I'm trying to configure a runCommand to wait more than the default value of 1 second to finish.
This is a sample pubxml code:
<ItemGroup>
<MsDeploySourceManifest Include="runCommand">
<waitInterval>60000</waitInterval>
<path>"C:\Company\install-services.cmd"</path>
</MsDeploySourceManifest>
</ItemGroup>
When I start a deployment, it successfully creates a *.SourceManifest.xml file in the temp package directory, but it only includes the path:
<runCommand path=""C:\Company\install-services.cmd"" />
Furthermore, I'm deploying the whole web site from Visual Studio.
Is there any way to get more than the path parameter added to the resulting file?
Everything is fine except that pubxml item group requires an additional XML element. The final and working result looks like the following code:
<ItemGroup>
<MsDeploySourceManifest Include="runCommand">
<waitInterval>60000</waitInterval>
<path>"C:\Company\install-services.cmd"</path>
<AdditionalProviderSettings>waitInterval</AdditionalProviderSettings>
</MsDeploySourceManifest>
</ItemGroup>
My markup lacked the <AdditionalProviderSettings> element. Once I've added this element, the *.SourceManifest.xml generated by Visual Studio looked like this code:
...
<runCommand path=""C:\Company\install-services.cmd"" waitInterval="60000" />
...
I use Asp.net 4 C# and MicrosoftAjax Minifier.
Please look at my code here; Using <Target Name="AfterBuild"> I'm able to minify all files .js and .css. The problem is that this code minify even the original files in my project solution, so would be almost impossible to edit theme once again.
I need instead minify all .js and .css on my solution after publishing it to a local folder.
In this way I can keep my original files in my project folder intact and have instead the site compiled and minified into another local folder.
I change my scripting using <Target Name="Publish">, I do not receive any error but It does not work.
Could you tell me what I'm missing here, and if there is a better approach to solve this problem? Thanks
<!-- Minify all JavaScript files that were embedded as resources -->
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
<Target Name="Publish">
<ItemGroup>
<JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />
</ItemGroup>
<ItemGroup>
<CSS Include="**\*.css" Exclude="**\*.min.css" />
</ItemGroup>
<AjaxMin
JsSourceFiles="#(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".js"
CssSourceFiles="#(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".css" />
</Target>
(copied from questions)
To deal with losing the original js/css files, ensure the target filenames include .min, eg. JsTargetExtension=".min.js" and CssTargetExtension=".min.css". See article on using MsAjax minifier: http://www.asp.net/ajaxlibrary/ajaxminquickstart.ashx
To then be able to publish the minified files, see this article: Using Microsoft AJAX Minifier with Visual Studio 2010 1-click publish
At my workplace, we are solving the minifying issue quite differently by using Chirpy addin for Visual Studio. It automatically minifies files to a .min version upon saving. See http://chirpy.codeplex.com/