Hi. I have a problem with my _custom.scss

[Mike01]

Hello, I’ve been working on a project with sass and bootstrap and at the beggining I customized bootstrap and It worked but now the customized things are not getting applied.

Here you can check - GitHub - MikeAvocato01/Bootstrap-5-project: Bootstrap 5 project

[lasjorg]

What specifically isn’t working?

---

BTW, don’t commit the node_modules folder. As long as you commit the package.json file anyone can install the needed packages.

[Mike01]

Let me provide you with more context.

I have installed bootstrap and sass, I created a _custom.scss file to customize bootstrap, specifically the primary, secondary colors and accordions.

I use this partial in style.scss

and I link it to the index.html

But the change I made are not getting applied in bootstrap

The page should have a different colors in accordions and icons but I’m just getting the ones that come bt default with bootstrap

[bradtaniguchi]

Doing a quick skim of the repo there’s a few things:

1. As said above, don’t commit node_modules or your compiled style.css file, add a .gitignore file with the contents of:

node_modules
assets/css/style.css

Generally anything you “compile” you shouldn’t want to save to git. Your actual source-code is scss files, and the css is just the resulting code.

At a glace it I assume your custom scss is within _custom, but I don’t actually see where/how you import it? You have @use 'custom' but I’m not sure if that actually loads the _custom scss files.

Its worth saying I’m not a pro at custom scss setups so I could be missing something, but thats just what I see at a glance.

[lasjorg]

Try importing functions before your variables and bootstrap after the variable.

_custom.scss

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

// custom variables

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

Sass

[Mike01]

I just did and did not work! Thanks anyway!

[lasjorg]

Push the code so we can see it. It seems to work for me anyway.

---

_custom.scss

//Import bootstrap 5.
@import '../node_modules/bootstrap/scss/functions';

//Theme colors.
$purple-dark: #9926f0;
$purple-light: #bb6ef5;
$pink: #d122e3;

//Primary and secundary.
$primary: $purple-dark;
$secondary: $pink;

//Accordion overrides.
$accordion-padding-y: 1.5rem;
$accordion-padding-x: 1.5rem;

$accordion-icon-color: $primary;
$accordion-icon-active-color: $secondary;

$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/> <path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/></svg>");
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/></svg>");

//White and gray colors.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;

.menu {
  background-color: linear-gradient(
    to right,
    rgba($primary, 0.95),
    rgba($secondary, 0.95)
  );
}

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

[Mike01]

Hi bro, It was working and it works, Thanks a lot!! I really appreciate your help!