0

I used to deploy Bootstrap.SASS (bootstrap 4 with SASS),in my standard .net web forms app with Nuget package manager. If try that with a .net core web app in visual studio nothing gets added to the fie system or my project (nothing in content directory. No sass or scss files.)

LibMan does not seem to have any bootstrap 4 package that contains the SASS content. How do I best integration Bootstrap SASS in my projects with Visual Studio 2019?

Jeremy
  • 44,950
  • 68
  • 206
  • 332

2 Answers2

1

I discovered that I could use LibMan with the unpkg provider. The bootstrap package on unpkg has sass.

The trick was that I couldn't get LibMan with unpkg to work if I used the GUI Tool accessed under Project Node (Right click) -> Add -> Client Side Library. Instead I had to edit the LibMan.json file and add the package manually, then it would install.

//https://learn.microsoft.com/en-us/aspnet/core/client-side/libman/?view=aspnetcore-2.2
{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    ...
    {
      "provider": "unpkg",
      "library": "bootstrap@4.3.1",
      "destination": "wwwroot/lib/bootstrap/"
    },
    ...
  ]
}
Jeremy
  • 44,950
  • 68
  • 206
  • 332
0

Considering no one else has attempted an answer, I'll make one up, but keep in mind I'm not a frontend web developer.

NuGet packages with content files do not support projects using PackageReference. SDK style projects only support PackageReference, never packages.config, and .NET Core projects only build with SDK style projects. Hence content files don't work with .NET Core projects, including ASP.NET Core. NuGet introduced a new contentFiles folder for PackageReference, but it works differently to content, and I imagine it doesn't work the way you'll need it to for compiling SASS to CSS.

Given that browsers don't support SASS directly, it means you must have something compiling/transpiling the scss files into css, and that's probably a tool installed via npm. Given that Bootstrap is distributed via npm, it seems that it would be low cost for you to get bootstrap sass via npm as well. Bootstrap's download web page says

Bootstrap’s package.json contains some additional metadata under the following keys:

  • sass - path to Bootstrap’s main Sass source file
  • style - path to Bootstrap’s non-minified CSS that’s been precompiled using the default settings (no customization)

which is frankly meaningless to me, but at a guess maybe you should install "bootstrap@sass", or something similar. I'm sure you can figure it out quickly with a few web searches. Having said that, there are also "bootstrap-sass" and "bootstrap-scss" npm packages, so perhaps you could use one of them.

zivkan
  • 12,793
  • 2
  • 34
  • 51
  • Thanks for the input. What do you mean by SDK style projects? Yes, I use the web compiler extension to transpile the sass to css at compile time. – Jeremy Jul 25 '19 at 18:26
  • 1
    Look at your csproj in a text editor. Your old ASP.NET app will import `Microsoft.Common.props` and `Microsoft.CSharp.targets` and have lots of other stuff and be long and hard to read. The ASP.NET Core project will have `Sdk="Microsoft.NetCore.Sdk.Web"`, or [one of the other ways to use sdk](https://learn.microsoft.com/en-us/visualstudio/msbuild/how-to-use-project-sdk?view=vs-2019), and otherwise be much shorter and easy to understand. – zivkan Jul 26 '19 at 02:50