How do I add custom stylesheets and scripts to a ASP.NET Core project?
Question
Let me start off by saying I've seen a StackOverflow question related to this but none of the solutions solved the problem.
I'm trying to add custom stylesheets and JS script files to a new ASP.NET Core solution.
The css and JS files in wwwroot do work just fine, but I'd like to be able to add my own as well.
I've added a Content folder to the project with a CSS folder inside of that(Content folder > CSS folder > Site.css), attempted to wire it up with a link tag in the _Layout.cshtml file but no success.
I also have a "Scripts" folder inside of the Content folder (Content folder > Scripts folder > CustomJS.js) mentioned above with the Javscript file (CustomJS.js) inside of that but am not sure how to wire that up either now that the BundleConfig file in the AppStart folder is gone.
What am I missing here?
Here is the _Layout.cshtml file from top to end of head tags.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - JavascriptPractice</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
**<link rel="stylesheet" href="~/Content/CSS/Site.css" />**
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
2 answers
solution1
0 2018-08-16 00:05:02
In order to serve the scripts and css from a directory other than wwwroot, you need to add another static file handler to your request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Content")),
RequestPath = "/Content"
});
}
See more details in the ASP.NET Core documentation on Static files .
solution2
0 2018-08-16 06:06:34
You can try with BuildBundlerMinifier
Install-Package BuildBundlerMinifier -Version 2.8.391
Install this package in your web project, after that create in the root of the project bundleconfig.json file. Here an example of the content of this file, you could only put your custom js/css files, if you don't want to change the jquery references in the layout.
[
{
"outputFileName": "wwwroot/css/globalCss.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.min.css"
]
},
{
"outputFileName": "wwwroot/js/globalJs.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"JS/site.js"
]
},
{
"outputFileName": "wwwroot/js/pageJs.min.js",
"inputFiles": [
"node_modules/jquery-validation/dist/jquery.validate.js",
"node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js"
]
}
]
This JS/CSS files are created on build of your project. If you make changes only in the js files you could Clean/Rebuild your project so they are reload properly. This is what you should see on build in your output:
Bundler: Begin processing bundleconfig.json
Minified wwwroot/css/globalCss.min.css
Minified wwwroot/js/globalJs.min.js
Minified wwwroot/js/pageJs.min.js
Bundler: Done processing bundleconfig.json
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.