CODEWITHSUNDEEP
asp.net-coresassbootstrap-4
finnporter
finnporter

Reputation: 23

customising variables in Bootstrap 4 with SASS in .NET core

I'm used to working on .NET MVC. I'm trying to learn .NET Core now and want to include Bootstrap with SASS. I'm completely new to the setup side of things and can't get it properly up and running.

I have set up my .NET core project and I've managed to install bootstrap 4 with libman. After I'd done it, I read that it's preferred to do it with npm but it seems to be fine. All the defaults work as expected.

Now I'm trying to make custom changes and that's where it gets troublesome. Just to see if changes are applied, I've changed the primary colour code in the _variables file but nothing changes. I've also tried to create a custom scss file to override the others but again, it doesn't work. I'm sure it's me doing something wrong but I'm not sure what.

my file structure looks like this. It was created when I installed bootstrap 4: file structure top file structure bottom the only thing I changed was adding the site.scss file for customisation.

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    </environment>
</head>

My custom site.scss:

$orange: #d95700;
@import "bootstrap";
$theme-colors: ( "primary": $orange );

When I make changes to the bootstrap.css they either show up or they get overridden by the _reboot.scss, depending on what it is. e.g. I can change the body bg color to red.

If anyone needs me to add any more information, I'm happy to do that.

Upvotes: 1

Views: 1386

Answers (1)

Chris Pratt
Chris Pratt

Reputation: 239290

Libman merely pulls in the libraries statically. Changing any of the SCSS files isn't going to cause the CSS file you're referencing to be updated. For that to happen, you'll need to set up a build of the SCSS with something like Webpack or Gulp.

However, if you want to actually modify the SCSS, then you should not rely on libman or even npm to pull in Bootstrap for you. Both of these will update the library in place, overriding any of your changes. Instead, you should simply download Bootstrap directly or you can include it in your project in a more updatable way by forking the Bootstrap project on GitHub and then including that in your repo as a remote. Then, you can commit changes out to your fork, and merge updates from the Bootstrap official repo into your fork.

Upvotes: 1

Related Questions