How to overwrite default color SASS variables.

How does one simply overwrite the default color variables? Say I want to change the $blue / $primary viable throughout all of the styling. Any insights or even efficient hacks would be helpful.

It appears you can create a sass partial (file that starts with an underscore) but I am not sure if this simply creates a compiled CSS file that overrides the full bootstrap.css file variables, which works but is not the most efficient.

There's instructions, but they don't go much into detail: https://bootstrapstudio.io/tutorials/writing-sass

So you can create a overide "theme" using sass in your Styles folder. Go to theming Bootstrap and read... https://getbootstrap.com/docs/4.2/getting-started/theming/

It states that "Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files."

So you must download and import the Sass folder files and folder structure to the Styles folder. I have a _underscore on all the files. Then the sass:

$primary: #be0a0a;

$theme-colors: ( primary: $primary, ); @import "bootstrap";

This will override (not replace) the Bootstrap Studio bootstrap.css file just like any other css file you include in styles. (It is a complete compiled custom bootstrap.css file).One could actually replace the main bootstrap.css file when project is completed or during testing after exporting. Everytime the Bootstrap version is updated you would probably want to update the sass folder to the new Bootstrap version also.

I only offer this up as a "trial" for others to test. Could not recommend it for production until further testing.

One thing I did notice is the downloaded css version of bootstrap (same version as Bootstrap Studio is using) is missing some -ms prefixes so its possible BS is running autoprefixer or some sort of postcss process on their file. Would appreciate any feedback …..

It's kinda like finding a Gold Willy Wonka Ticket !

BS is running autoprefixer or some sort of postcss process on their file. Would appreciate any feedback …..

Me too

Greetings,

can we have a word from the dev on this, does this method of importing all the BS SASS framework into BS will interfere with look&feel/options/Animation tools? Do you validate this method, or does it have to be considered as a temporary solution or not valid? Maybe you are planning to had tools panel to edit the bootstrap variable in the future?

Can we import bootstrap in our SASS files without the need to download bootstrap sass folder and include them in the bootstrap studio? We need to override the _variables bootstrap file.

Hey guys!

Sorry for replying so late to this thread. The recommended way to customize Bootstrap is to do your modifications outside of the application and import the compiled CSS as a custom theme.

We would like to make the Bootstrap SASS editable in the app itself at some point, but we need to figure out how to unlock it without this leading to breakage. It is also not entirely clear how upgrades of the framework (say from 4.0 to 4.3) would be handled so that modifications are retained. Maybe just letting users change a white listed set of variables would be enough.

Would love to hear your opinions on this.

1 Like

Any updates on this topic? I need custom Bootstrap Style (like https://getbootstrap.com/docs/4.2/getting-started/theming/) but the example on (https://bootstrapstudio.io/tutorials/writing-sass) does not work with:

Modify map To modify an existing color in our $theme-colors map, add the following to your custom Sass file:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Bootstrap Image Error enter link description here

@Twinstream your example does not works. @Martin Angelov how i can override colors using scss? Not custom theme!

Why not just go to one of the many new Bootstrap Theme Builders online such as http://themestr.app/ and create your theme, download, import as a theme (theme.css), and then choose it as your theme in Design settings ?

If you choose to use the compiler included in Bootstrap Studio which is a somewhat complex method, then you will need to import all the needed files for the compiler to build the bootstrap.css file. The error on your screen is correct because it does not know the path to the bootstrap file that will have all the included file paths to compile. That means the complete structure must be inside Bootstrap Studio to work not to mention the "underscored" _naming of files you do not want to be compiled but used.

The theme import is really the way to go and will work with publishing or exporting (later uploading to your server).

I agree with Twinstream. So much simpler to do it that way.

Certificate expired for ten days now. Looks like that site is dead now:

Your connection is not private Attackers might be trying to steal your information from themestr.app (for example, passwords, messages, or credit cards). Learn more NET::ERR_CERT_DATE_INVALID

Why not teach clearly how to use SASS inside Bootstrap through the compiler the right way? Relying on others (like you say: themestr.app) to do simple things like creating your own theme is very bad

I would agree that using the online theme builders that are becoming popular would not be the greatest solution for some if you want to have full control over versions and advanced customization.

You still need to jump thru some hoops to get your theme.scss that is complied inside Bootstrap Studio using its compiler exported, reimported as a theme, and then removed as a linked style sheet from all the pages.

Simply renaming the "theme.scss" to "_theme.scss" with a underscore does seem to toggle the ability to do that when changes are needed or not. (A export is required first)

One can also setup a "master template page" inside the project so you can see all your theme palette settings as you apply changes to your custom template that will then be applied globally across all pages. These templates are easily found on the web also and can be added simply by using the html custom code.

This method only works for exported projects.

Currently the suggestion is offered only as a "test" as some may find it useful or add to the discussion.

I just wanted to correct my statement that this only works for exported projects. It does work for the publish method also granted you follow the steps of exporting and then importing the compiled theme back in to be chosen before publishing. I was unaware that a cdn is not used as a link for the bootstrap.css if one chooses a theme. (Which is way cool).

And finally one small hoop left is the fact that a dry compile of the sass bootstrap files does not have all the vendor prefixes so one would have to add them with autoprefixer before reimporting the compiled theme back into Bootstrap Studio.

Those settings for your external compiler would be I believe defined from these 3 links...

Source Files https://getbootstrap.com/docs/4.3/getting-started/download/

Browser List https://github.com/twbs/bootstrap/blob/v4.3.1/.browserslistrc

browserl.ist browserl.ist

That should get you a fully custom autoprefixed theme to import back into Bootstrap Studio for 4.3

Could you do a detailed "How to" of the procedures? I couldn't understand how to add files correctly and how to edit them after that? I believe Screenshots would help ... I can make video later to help people who have the same question. Can you explain in more detail?

up

@ myf

Hopefully this will help....

https://bootstrapstudio-theme-building.bss.design/

Dont forget after export you will have to run autoprefixer on the theme to add the additional vendor prefixes and then re-import it as a theme to select in settings. Then toggle off the theme.css file by adding a underscore _theme.css to it until you need to make more changes again.