Error BLAZOR102 when using CSS preprocessing

[JohnKiller]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

Follow up of #38374 I've successfully managed to use the documentation to copy compiled files to the wwwroot folder using MSBuild.

Now I would like to do the same with Blazor scoped css, but every tutorial I've found just places the compiled CSS file inside the git repository instead of the recommended obj/ folder.

I've update my repo here https://github.com/JohnKiller/TestCopyFile

Inside RazorClassLibrary1/RazorClassLibrary1.csproj I've placed a fake compilation step that just copies the scss in the obj/ folder and then includes it:

<Target Name="NpmRunBuild" BeforeTargets="AssignTargetPaths" Inputs="Component1.razor.scss" Outputs="$(IntermediateOutputPath)Component1.razor.css">
	<Exec Command="copy Component1.razor.scss $(IntermediateOutputPath)Component1.razor.css" />

	<ItemGroup>
		<Content Include="$(IntermediateOutputPath)Component1.razor.css" Link="Component1.razor.css" />
	</ItemGroup>
</Target>

But this is the error I get:

obj\Debug\net6.0\Component1.razor.css : error BLAZOR102: The scoped css file 'obj\Debug\net6.0\Component1.razor.css' was defined but no associated razor component or view was found for it.

To me it looks like since the path is inside obj\Debug the framework misinterprets the path to be outside the component project location and refuses to bundle it.

Expected Behavior

I would like this solution to work so I can avoid adding the compiled css file to the git repo and keep only the source scss. Using .gitignore is not an option because it causes the problem described in #38374

Steps To Reproduce

Build https://github.com/JohnKiller/TestCopyFile

Exceptions (if any)

obj\Debug\net6.0\Component1.razor.css : error BLAZOR102: The scoped css file 'obj\Debug\net6.0\Component1.razor.css' was defined but no associated razor component or view was found for it.

.NET Version

6.0.101

Anything else?

No response

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[althepal78]

I don't know why I am getting this stupid ass message I am not using blazor at all wtf

[iykeypat]

error BLAZOR102: The scoped css file 'obj\Debug\net6.0\Component1.razor.css' was defined but no associated razor component or view was found for it.

Solution: I recreated the razor component with a different name, copied my code to it, scoped the css file again and copied the css from the former one to it and voila, the error stopped.

[Albiniivari]

Also having this issue at my work. The generated Scss files stays after switching branches, and thus creates this error. Is any solution found?

[KurtGarrettALS]

Same issue as reported above . To test; I created new Blazor Server solution targeting .net 6. Then created Razor component CustomNotFound.razor and then CustomNotFound.razor.css. VS attaches the css file correctly but then throws error:

Severity Code Description Project File Line Suppression State
Error BLAZOR102 The scoped css file 'Pages\CustomNotFound.razor.css' was defined but no associated razor component or view was found for it. CustomerService C:\VSApps\Development\CustomerService\CustomerService\Pages\CustomNotFound.razor.css 1

[rmeise]

Same error as @KurtGarrettALS , @Albiniivari and others!

my solution: deleted the component that was giving me the problem and restarted VS, recreate the component with new name!

[manojdcoder]

I had the same issue, was compiling my Sass files before ResolveScopedCssInputs, then added the output to content.

I think ResolveScopedCssInputs target itself takes care of identifying the CSS files, so when I removed the duplicate inclusion on my end the issue was resolved.

[schwindy]

I had a similar error, except it was for a .js file.

In my case, I was running dotnet publish src/example/example.csproj -o path/to/publish. The key was the -o, using a "custom output directory".

Using -o, the error always occurred if I ran dotnet publish twice in a row. The only way to fix it was to manually delete the path/to/publish myself. The next publish would work, and the cycle would repeat.

By removing the -o from my dotnet publish, it caused the output of the build to be published to ./bin/Release/net8.0/publish. And the error does not occur when attempting to re-publish.

Summed up, by leaving -o as default, the error went away. 🐒 I am somewhat new to .net but that does not seem intended. Hope this helps someone else, and that someone can explain why this is the case.

[javiercn]

The solution is to use ResolveScopedCssInputs as inidicated #39344 (comment)

[JohnKiller]

I've updated https://github.com/JohnKiller/TestCopyFile to use ResolveScopedCssInputs as suggested. It fails with:

BLAZOR102 The scoped css file 'obj\Debug\net7.0\Component1.razor.css' was defined but no associated razor component or view was found for it.

[dotnet-policy-service]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.