Problem/Motivation

Hi Tina! First, thanks for this theme!
So, I have this theme installed, configured and running (npm, sass, gulp, etc...). Everything is fine.
Also, I uncommented bootstrap in _libraries.scss and the theme now have the bootstrap styles applied.
My next step was to overwrite the Bootstrap variables in /base/_variables.scss and I expected my new styles to be applied, but it was not the case.
Could you please explain to me what I'm missing?
Also, just to point out, in the readme, you say "check out the sass/base/_libraries.scss" but the _libraries file was in /sass/_libraries.scss.
Thanks in advance!

Steps to reproduce

Reproduce all the steps in the theme page and readme.
$ Gulp
Copy some variables from @import "../_npm/node_modules/bootstrap/scss/bootstrap"; to /sass/base/_variables to overwrite them.
No new styles applied.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Comments

ktegory created an issue. See original summary.

codevelopment’s picture

codevelopment
Location Perth, Australia
commented

Hi Khiustin, I tested this and was able to reproduce your issue. I think the problem is that in 'sass/application.scss', 'libraries' (which imports Bootstrap) is imported before 'base/base' (which imports the theme's variables). To override Bootstrap variables, they need to be imported before the Bootstrap library, which is why the Bootstrap overrides aren't being invoked from the theme's variables file.

I got this working as follows:

- Create a new 'sass/base/_custom_bootstrap_variables.scss' file, and place your Bootstrap-specific variable overrides in there.
- In 'sass/_libraries.scss', add `@import "base/_custom_bootstrap_variables";` just before the uncommented `@import "../_npm/node_modules/bootstrap/scss/bootstrap";`.

@tinamrak may have a more elegant solution, but if it helps, I'm happy to roll a patch or update the README.

ktegory’s picture

ktegory commented

Hi @codevelopment, thanks for the help!
I have tried it and it works as you said.
Again, thanks!

  • tinamrak committed efbee2a on 8.x-1.x 
    Issue #3164909 by ktegory, codevelopment, tinamrak: Howto override...
tinamrak’s picture

tinamrak commented
Status: Active » Fixed

Thank you codevelopment for your solution - it's great but I did it a tiny bit different.
Thank you ktegory for finding the readme bug, it's fixed in the new release.

I created a new folder "libraries" where all the files related to libraries are. It now includes a _bootstrap_variables_override.scss where you can override the default Bootstrap variables and I also included instructions in the _libraries.scss file.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.