I've been assigned to migrate an application from MVC into ASP.net Core, I'm new to ASP.net Core. In MVC we have BundleConfig.cs and in there we add references to our css and js files, how does it work in ASP.net Core? Let's say that I created a test.js and a MyStyle.css class, which is the best way to add references to it in every view? Should I place the .js and .css files inside wwwroot/js and wwwroot/css?
Add a comment
|
7 Answers
I added the references inside the _Layout view, inside the <environment> tags:
<environment names="Development">
<link rel="stylesheet" href="~/css/MyCss.css" />
</environment>
If anyone knows a better way I would welcome it
4 Comments
OrcusZ
Do you know how it work for specific css view files ?
Eduardo Hernández
I think this answer is incomplete. For that to work, you need to place the
css folder inside the wwwroot folder. Also, you need to add app.UseStaticFiles() in the Configure method in the Startup class.
Shimmy Weitzhandler
What to location should you place your css files at?
AlexGH
@Shimmy Take a look into the wwwroot folder
The better way to do it is to use: app.UseStaticFiles(); inside startup.cs before routing.
2 Comments
Nick Gallimore
Can you explain the reason why this is better?
Nick Gallimore
For more information see: learn.microsoft.com/en-us/aspnet/core/fundamentals/…
In _layout:
@await RenderSectionAsync("Styles", required: false)
Then your view:
@section Styles{ your CSS }
Information from: https://dev.to/amjadmh73/loading-custom-css-files-in-razor-pages-4no9
2 Comments
lidermin
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
Jeremy Caney
To expand on @lidermin's point, the question is about how to reference assets from every view. Your answer seems to be answering a different question, something along the lines of "How do I allow views to inject styles into the
<head /> section?" Using your approach, however, the OP would have to repeat the script and style includes on every view.It might be a bit late to answer the question, but for the ones who come here via Google: I found that adding asp-append-version="true" worked for me, as all the other options given in the other answers were already provided in _Layout.cshtml.
Comments
I put the JS and CSS files in an assets folder in the wwwroot folder of my application and then used link tags in my _Layout.cshtml to bring in the styles. Steven Sanderson has part a of a blog post where he talks about adding third party libraries here.
You could also do some sort of setup using webpack. I admit, this topic is not very straight forward.
Comments
I put the CSS files at ~/wwwroot/css, and the JavaScript files at ~/wwwroot/js. Then I followed the format of the default _Layout.cshtml file.
<head>
. . .
<link type="text/css" rel="stylesheet" href="~/css/myCSS.min.css" />
. . .
</head>
<body>
. . .
<script src="~/js/myJS.min.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
. . .
</body>
