2

I am working on an app, where I want to use a more deep-orange color style and have tried to override certain variables from the sass version of the files, but when I compile it using gulp it does not change. Another thing that is weird is that when I use the sass version, the default colors are blue/indigo, but when just using the precompiled css from the github repo, it uses the teal color style. I have the following in my app.scss file

@import "vendor/bootstrap/_bootstrap";
@import "vendor/bootstrap-material/bootstrap-material-design";
@import "vendor/material/ripples";

I tried to override variables by adding the variables that I wanted to change, such as the link-color, but no luck

@import "vendor/bootstrap/_bootstrap";
@import "vendor/bootstrap-material/bootstrap-material-design";
$link-color: $red !default;
@import "vendor/material/ripples";

Does anyone know how to change the overall color style of the theme?

T J
  • 42,762
  • 13
  • 83
  • 138
Kenneth_H
  • 141
  • 2
  • 13

3 Answers3

0

In order to change default values of Bootstrap variables, you need to define them before you actually import bootstrap partial - making sure that you apply !default flag to it, so it can't be overwritten.

kasperoo
  • 1,524
  • 1
  • 12
  • 14
0

The issue could be that SASS partials should start with an underscore, or the file would otherwise compiled to a CSS file.

Since vendor/bootstrap-material/bootstrap-material-design doesn't start with an underscore, it is probably being compiled into CSS without taking the variables defined after the @import into account.

I'd also like to mentioned that as of now (Until the next major release supporting Bootstrap4), Bootstrap Material Design projects sass files are automatically generated from LESS files. So in case prefixing with underscore doesn't help, you'll have better luck modifying the LESS files and compiling CSS or generating SASS files.

T J
  • 42,762
  • 13
  • 83
  • 138
-3

When changing Bootstrap styles/themes, I find the browser's Inspector to be very useful.

  • In Firefox: Tools > Web Developer > Inspector
  • In Safari: Develop > Show Web Inspector

Select an element in the page, and it shows all CSS styles being applied to it in hierarchical order (i.e. styles that are being applied correctly, but overridden by another style that takes precedence). Often, something is being modified by an element I didn't realize or is called something different than I thought.

whyeliah
  • 95
  • 1
  • 2
  • 9