Angular-Bootstrap-NgBootstrap - _rfs.scss width rule overriding column width of col-rules

Question

The Problem

I am writing an Angular application, in which I use bootstrap and ng-bootstrap. I want to use the grid-system there, but within the current project it appears to be buggy.

When rendering the following HTML/TS (empty scss file)

<div class="container-fluid">
  <div class="row">
    <ng-container *ngFor="let entry of entries">
      <span 
        class="col-md-6"
        style="height: 3rem; border: 2px solid black;"
      >
        Text
      </span>
    </ng-container>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  entries = Array(8).fill(undefined);
}

It renders the following:

I would expect to see 2 columns of entries, as shown in the second screenshot further down.

As shown the styling of col-md-6 class is applied correctly. It is even recognized that the screen is larger than the md-breakpoint and thus width should be 50%! However, width is overwritten by some set of rules from _rfs.scss, which appears to be a bootstrap feature.

Gathered Information

I created a fresh project to run that HTML in with bootstrap and ng-bootstrap installed, it worked perfectly fine there, so I could not replicate the issue.

Based on that, here what I gathered so far:

• The HTML and the used css classes are correct as they render correctly in a fresh project
• Bootstrap.scss imports appear to not be the issue, my imports of it always looks like this: @import '/node_modules/bootstrap/scss/bootstrap.scss';
• The styles.scss appears to not be the cause of the issue (I copied it and all scss files it imports to the fresh project, it still rendered correctly)
• Installing ng-bootstrap appears to not be the cause of the issue (I installed it into the fresh project, it still rendered correctly)
• The dependencies installed in package.json and the assets+styles in angular.json appear to not be the cause of the issue (I copied those over to the fresh project, it still rendered correctly)
• The problem appears to be component specific. Rendering the HTML directly in app-component in both projects provides equal results.

So my questions are:

• How come _rfs.scss rules for row only appears in my original project, but not in a fresh-one?
• How do I deal with this?

Related Questions

There already exists a question about my problem here.

However the answer given there did not solve the problem and was also incorrect. The width property being overwritten by _rfs.scss is what is causing the initial problem here, though the root problem may be that _rfs.scss occurs in the first place, I am uncertain about that.

Further, it is by no means required to assign "col" or "col-12" to every column, a single "col-md-6" already suffices to receive the behaviour of "Display the entries in 2 columns as long as the screen is larger than medium size, in 1 column if it is smaller". The bootstrap docs show as such in one of the later examples.

As the description of the other question lacked too many things for proper troubleshooting I thought it best to open a new one.

Troubleshooting material

In case it is relevant, here my styles.scss:

@import './custom_bootstrap.scss';
@import '/node_modules/bootstrap/scss/bootstrap.scss'; //Must be imported after custom_bootstrap so that values from custom_bootstrap are available for overriding
@import './variables.scss';

html{
    font-size: 16px;
}

body{
    font-family: "Source Sans Pro", sans-serif;
    overflow-x: hidden;
}

.highlight{
    background-color: var(--highlight-gray);
}

.hover-highlight{
    transition: 0.2s background-color;
}

.pointer{
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .hover-highlight:hover{
        background-color: var(--highlight-gray);
    }
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
    font-weight: bold!important;
    line-height: 1.5;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}


h1{
    letter-spacing: 0.5rem!important;
    font-size: 2.25rem!important;
    line-height: 1.3!important;
}

h2{
    letter-spacing: 0.2rem!important;
    font-size: 1.5rem!important;
}

blockquote{
    border-left: solid 4px var(--bs-white);
    font-style: italic;
    margin: var(--spacer-0);
    padding: var(--spacer-2) var(--spacer-0) var(--spacer-1) var(--spacer-4);
}

@import './custom_ngbootstrap.scss';
@import './global_class_modifications.scss';
@import './custom_leaflet.scss';

Answer 1

My scss file for that component was not as empty as I had posted. I just didn't see any rule of it being applied, so I didn't think it mattered. The problem was that it imported my screens.scss file there and screens.scsslooked like this:

@import '/node_modules/bootstrap/scss/bootstrap.scss'; // <-- Problematic way of importing bootstrap
...

The bootstrap import here is the problem. Or more specifically, the precise way that import works. For some reason having this second bootstrap import (on top of the one in styles.scss) causes issues with RFS.

This is easily fixable by changing the way you import bootstrap. The following worked without issues:

@import 'bootstrap/scss/bootstrap';
....

However, I have since removed screens.scss and started using the bootstrap-provided tools for media queries, which may be worth a mention. Still require a bootstrap import as above though.

It may be worth mentioning though that one should start migrating to @use instead, as the SASS folks are working on phasing @import out.