0

How do I include a bootstrap mixin, in an ASPNetCore project?

I have Web compiler installed. I added an scss folder and copied the alerts-variant mixing code from here:

https://martijncuppens.github.io/bootstrap-mixins-documentation/docs/4.1/mixins/#alert-variant

Then I RIGHT-CLICK -> Web Compiler -> Recompile

and the _alerts.css is empty.

Same thing happens when I use http://beautifytools.com/scss-compiler.php

What am I doing wrong?

I am using an AdminLTE project template, and I don't want to customize and recompile the entire AdminLTE+bootstrap bundle unless I absolutely have to.

turkinator
  • 905
  • 9
  • 25

1 Answers1

1

I think you are a little confused about what a mixin is. You need to actually call it in a sass via the @import directive and that will be compiled to the css. If you do not call the mixin the scss compiler will not include it in the project as it is unnecessary. The template will not magically blend in asp.net core you will have to include all the scss and then use some razor syntax to actually mimic the examples. If you want to change the scss with new mixins you will need to call them and override the styles with specificity.

Juanjo
  • 670
  • 7
  • 17
  • Thank you, this is new to me, and I thought I could at least compile the variant without needing the entire bundle. I have another project referencing bootstrap over cdn, I see the alter-variant scss referenced in the source. I wish to get that alert style in my new project: https://stackpath.bootstrapcdn.com/bootstrap/scss/mixins/_alert.scss – turkinator Jan 14 '21 at 23:57
  • 1
    The mixing are called by bootstrap. If you use the bootstrap alert component it will use the mixin. In bootstrap the styles are changed by themes. The AdminLTE template you downloaded will use their version of bootstrap with the theme they created. You just need to call the bootstrap alert component (https://getbootstrap.com/docs/4.0/components/alerts/) making sure that you don't interfere with the template's own css files. – Juanjo Jan 15 '21 at 00:02
  • So, my issue turns out is not a missing mixin, but an undesired one I can't remove from my project. In the browser, the default alert style is bring overwritten by _direct-chat.scss, but I can't figure out how to remove that component from my project. – turkinator Jan 15 '21 at 00:51
  • 1
    That's the template you downloaded. You need to override the styles yourself either by specifity or if you can't figure it out... well... with !important added to your styles. – Juanjo Jan 15 '21 at 11:30