Home > Back-end >  CSS File Not Included in Razor Page
CSS File Not Included in Razor Page

Time:06-20

I am beginner in Razor pages concepts. I started to add a razor page in an already existing project. It's a home page and I should be routed to it on start. I added a link for css files but they are not included. I really don't have an idea why this happen. I am sure that the paths are right and I located them properly in the wwwroot. I am stuck on that few days ago. Any thoughts why might this happen?

@model MyProject.Area
@{
    Layout = null;
}

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" />
    <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body >

    <div id="mainSection" >
    </div>
</body>
</html>

CodePudding user response:

You need to change:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" />
<link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />

To:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet">

Without / in the final. Hope I helped you. Have a wonderful weekend.

Regards

CodePudding user response:

I'm afraid maybe the path of css is not correct.The bootstrap.css file is in /lib/bootstrap/dist/css by default.So the css reference will be like:

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />

If the paths are correct.Try to make sure the project contains app.UseStaticFiles(); in Startup.cs like this:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            ...
            app.UseHttpsRedirection();
            

            app.UseStaticFiles();

            app.UseRouting();

            ...
        }
  • Related