Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Some broken CSS after clean installation from the template #125

Closed
arsinclair opened this issue May 18, 2022 · 11 comments
Closed

Some broken CSS after clean installation from the template #125

arsinclair opened this issue May 18, 2022 · 11 comments

Comments

@arsinclair
Copy link

When installing from this template dotnet new antdesign -f -o projectname, somehow the site looks a bit broken. It looks like some css may be missing.

Peek 2022-05-18 05-02

The same components on https://pro.antblazor.com look absolutely fine.

What could be the issue?
@arsinclair
Copy link
Author

I noticed that the very last import in the <head> of my index.html is <link href="projectname.styles.css" rel="stylesheet" /> however there's no physical file like this. Is there something that should generate it?

@ElderJames
Copy link
Member

Hi @arsinclair , yes, our tempalte is default to use CSS , and our online site is use Less, So it's possible that some CSS is broken.

Would you like to take a look for us, please?

@arsinclair
Copy link
Author

I have tried dotnet new antdesign -f --styles less -o newproject and then ran npx gulp --gulpfile gulpfile.js to generate the css. Having done this most of the css looks good now.

@ElderJames do you know what could be the problem with default .css installation? Could you reproduce the problem?

@arsinclair
Copy link
Author

What still doesn't look good is the login page:

image

As you can see it is stretched in a weird way.

@ElderJames
Copy link
Member

I think CSS isolation is a problem , they change children components in *.razor. CSS require ::deep, so CSS issues are a bit trickier when it comes to changing children component styles. However, the CSS generated by less files is global,so it's fine.

@arsinclair
Copy link
Author

Okay, so this is a bug in this repo, technically.

Do you have any ideas why the login pages looks funny?

@arsinclair
Copy link
Author

Yikes! I went down the rabbit hole of digging what could be the issue. There's no problem with the template, but there's with the dotnet. According to https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-6.0#css-isolation-bundling:

At build time, a project bundle is created with the convention obj/{CONFIGURATION}/{TARGET FRAMEWORK}/scopedcss/projectbundle/{ASSEMBLY NAME}.bundle.scp.css

{CONFIGURATION}: The app's build configuration (for example, Debug, Release).
{TARGET FRAMEWORK}: The target framework (for example, net6.0).
{ASSEMBLY NAME}: The app's assembly name (for example, BlazorSample).

I checked if I have this file, and new-project.styles.css is there indeed. Then I went to the index.html and checked if the file is imported. Here's what I see: <link href="new_project.styles.css" rel="stylesheet" />. As you see, dotnet replaced the dash with an underscore. That's why the file wasn't found in my second comment.

It is probably related to dotnet/templating#1168 and looks like the bug is still there, at least for some files like this, but I'm too tired to report it to Microsoft and carry the ticket through. If anyone wants to do it - the liberty is yours.

With that being that, this is not a problem with this template, and for me personally the solution is to just rename the import to <link href="new-project.styles.css" rel="stylesheet" /> (replace the underscore with the dash).

Thanks for your attention!

@ElderJames
Copy link
Member

But we still need to fix the styles so that the templates work out of the box.

@arsinclair
Copy link
Author

arsinclair commented May 19, 2022 •
edited
Loading

But we still need to fix the styles so that the templates work out of the box.

Yes, but it is not in our hands. The issue I'm experiencing is there for two reasons:

  • because my project has a dash in its name
  • because there's a bug somewhere in dotnet that creates an incorrect linking between the produced .css file and an index.html file

The best we can do on our side is to document this case and tell the users that a linking needs to be corrected manually.

@arsinclair
Copy link
Author

arsinclair commented May 19, 2022 •
edited
Loading

If there's another .css problem that I'm not aware of, maybe a separate issue should be created. When I fixed the linking between the .css and .html file in my project, I haven't experienced any other problems, neither with less, nor with default css-based projects.

@ElderJames
Copy link
Member

Ok, it's fine. 😀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@arsinclair @ElderJames