Twitter Bootstrap Question posted in

Error installing [email protected] in VS2019-Twitter bootstrap

I tried to install [email protected] in VS2019 , but got the following error
LIB010 Failed to download resource from “https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/scss/_alert.scss
I didn’t find anything to help me fix the problem.
I was able to install 4.5.0 version of twitter-bootstrap in vs2019
Any help would be appreciated . Thanks

Tags:

2

Answers


  1. 0

    I tried adding this as a comment but it was longer than the character limit. It looks like its erroring out on a scss file. I would recommend grabbing and putting these into your code to replace the old partial cdn you have above. In fact strip any install or cdn you have referencing bootstrap and its dependencies and replace it with the following which i got from bootstraps v5 docs which you can see here: Bootstrap V5 Docs w/ CDN links

    <!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<!-- JavaScript and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

    Delete any existing code in your Pages/Shared/_Layout.cshtml and paste the below code into there:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication3</title>
    @*--REPLACE THESE--
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="~/css/site.css" />*@

    @*--WITH THESE--*@
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
    <!-- JavaScript and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">WebApplication3</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - WebApplication3 - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

    Image of working project w/ no errors in console:
    enter image description here

    Explanation:
    Steps I took to reproduce if for some reason you dont have that file is to

    1. Open Visual Studio
    2. Create a new project
    3. Choose ASP.NET Core Web Application
    4. Give your project a name and push create
    5. When the box pops up after pushing create that says "Create a new ASP.NET Core web application" click on the third option down which should be titled "Web Application"
    6. Open "Pages" Folder
    7. Open "Pages/Shared" Folder
    8. Delete all code out of _Layout.cshtml
    9. Paste the code above into _Layout.cshtml
    10. Push play and you should see a match to the image i attached in the answer 🙂
    Login or Signup to reply.
  2. 0

    I also had this error.

    I installed version [email protected] with [email protected] and it works now…

    Perhaps a problem with the latest version?

    Kind regards
    Cornelius

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search