I want to integrate a bootswatch theme in my ASP .NET MVC Core project. I am working with Dot net version 6. I can not integrate the template, the background always remains the same in my application. Can anyone suggest to me a proper way to integrate the template?
1. You can run npm init --yes, and install bootswatch with npm command.
2. Copy the node_modules folder, and paste into the wwwroot.
Please include the node_modules folder in your project.
3. Modify the _Layout.cshtml.
Test Result
For more details, you also can follow this video to learn.
Tips: The name in package.json can't same as bootswatch, otherwise you will fail to install bootswatch.
Related
Environment: .NET Core 2.1 running on Ubuntu 18.04
When a new ASP .NET core project is created, a bunch of client-side packages are automatically generated. For example:
$ dotnet new razor
$ ls wwwrooot/lib
bootstrap jquery jquery-validation jquery-validation-unobtrusive
However, I do not see any configuration file that lists these client-side packages.
I believe bower is no longer being used. Plus, I don't see any bower.json file.
I believe libman is not even present on my machine. Plus, I don't see any libman.json file.
Using the command dotnet restore restores only the .net packages listed in .csproj file but does not restore packages under wwwroot/lib directory.
As a quick test, I deleted wwwroot/lib directory and tried various commands. However, none of my attempts was able to restore any packages under wwwroot/lib directory.
Can someone please tell me how are client-side packages managed in ASP.NET Core 2.1 and beyond? How does one upgrade these packages to the latest version?
Most of the files in projects created with the dotnet new command are simply hard-coded in the template. So if you delete them the only way to get them back would be to copy them in from somewhere else.
If you want to manage client-side libraries, then you can use any number of tools to help you such as LibMan or one of the many third-party alternatives.
I have been trying to create a new project using the new Vue CLI 3 with ASP.Net Core web. I can use dotnet new to create a nice new blank web project, and can use vue create to create a new Vue.js Hello World template but I can't for the life of me get them working together.
I wrote a detailed tutorial available at Medium.
You can use Microsoft Microsoft.AspNetCore.SpaServices NuGet package to specify SpaStaticFiles folder instead of copying client app on build to wwwroot and ignore *.cshtml files and use directly vue index.html file.
You can also install VueCliMiddleware NuGet to run npm process with client app using Vue CLI 3.0 when your .NET app starts.
It should be pretty straight forward
Create a new dotnet project
Create a folder inside dotnet solution. For instance, VueApp, ClientApp, or something.
Scaffold a new Vue project inside that folder using Vue cli.
Change the output directory to point to something like "../../wwwroot/dist"
Build your app. Take note though if you're building for dev or production, output structure will be different.
In your _Layout.cshtml or Index.cshtml, however you want to organize it, reference those outputted files.
Add <div id="app"></div> into your .cshtml.
You're done, enjoy.
Recently I Installed the VS 2017 Which Contains Asp.net mvc core 2
but there is a very confusion problems there!
that is how can i Install a new package into the wwwroot so:
_ Im using bower but supporting is end of and can not find out bower.json in the project>> new item after config it using npm . I installed it using npm but still can not find( .bowerrc file under bower.json.) to set the directory:
So-called valid document
_with gulp and grunt : end of supporting gulp too and can not find gulpfile.js in the project>>new Item after configure it using npm
please heeeeeeeeeeeeeeeelp me
You can use Library Manager:
Library Manager (“LibMan” for short) is Visual Studio’s experimental
client-side library acquisition tool. It provides a lightweight,
simple mechanism that helps users find and fetch library files from an
external source (such as CDNJS) and place them in your project.
I have been trying out VS2017 ASP.NET core Razor lately, and trying to download fontawesome 4.7 (latest as of today) using bower.
However, after downloading font-awesome, I can't find it in the wwwroot/lib.
Must I update the gulp to compile the less to css and the copy it to the lib folder myself? I don't feel this is the correct way, otherwise the font-awesome folder will remains even after we uninstall it from bower.
I really don't know what to do now.
I fond out that this might be a bug in VS2017
While we can manage bower packages out of the box. We need to add bower.json to the root of the solution manually. Otherwise bower will not work.
I am trying to add Sass files to my .NET Core application in Visual Studio 2017. However, I cannot find any way to compile .scss files once I've made them. I sifted through NPM and Bower, but neither offer support for Sass.
The Microsoft documentation for adding Sass (https://learn.microsoft.com/en-us/aspnet/core/client-side/less-sass-fa) is outdated, and assumes that the project has a package.json file. Any guidance on enabling Sass compiling for my project would be much appreciated.
The easiest way to add .scss to your ASP.NET Core apps is by going to the Nuget Package Manager and installing LigerShark.WebOptimizer.Core and LigerShark.WebOptimizer.Sass.
After that, you can just put
<link rel="stylesheet" href="~/css/site.scss" />
in the head of the _Layout.cshtml file and the LigerShark.WebOptimizer.Sass package will compile all of your sass files automatically.
Use this extension for Visual Studio https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler
This extension not only lets you manually compile SASS/SCSS files to CSS, but it also adds a compilerconfig.json which can recompile your CSS every single time you click save.
Additionally, this extension can compile on project build via a nuget package it can install into your project. Which also enables CI/CD support.
This is by far the easiest way to add SCSS/SASS compilation to an ASP.NET Core Project when working inside of Visual Studio.
Try the article How to use Sass in ASP.NET Core 2.0 MVC
If I understood correctly, you can create a blank project.json with node package manager. And you can also configure auto build event with grunt.
Or better yet, follow this tutorial and manually add the file project.json to the project:
https://learn.microsoft.com/en-us/aspnet/core/client-side/less-sass-fa
(retired doc page, now redirects to fontawesome)
Seems that you have missed this part (that file should be created manually):
If you want SCSS compilation and bundling in one simple tool, try NBundle. (Apologies for the shameless self-plug!)
You specify which files to monitor (wildcards allowed) and the tool can be used to generate compiled and bundled files in a one-shot or "watcher" mode where output files are generated when the source files are saved.
How to accomplish this might depend on your workflow. I'd like it to be part of the build process as seamlessly as possible. So my prefered solution is using a dotnet tool called excubo.webcompiler(no I'm not affiliated in any way with the author). If you install it as a project tool
dotnet tool install Excubo.WebCompiler
you can add a simple target to your project file.
<Target Name="CompileStaticAssets" AfterTargets="AfterBuild">
<Exec Command="dotnet webcompiler -r wwwroot" StandardOutputImportance="high" />
</Target>
That will use the default settings which will often be sufficient. If not you can tweak the process using a configuration file
You simply need to add a package.json think you getting confused with project.json which was the old project system for .net core projects prior to switching back to .csproj
You can use live SASS compiler for compiling SCSS to CSS when the build occurs.
You have to add few line in the .csproj file and prior to that install live sass compiler from npm.
Here is my blog post: How to Use SCSS with ASP.NET Core 5.X or 3.X