$brand-* doesn't get overwritten about bootstrap-sass-loader

[mmahalwy]

I think in styles.loader.js, the custom file needs to come before the variables file
Notice: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L18

If it comes before, it overrides it. Otherwise, for some reason, it's not getting pushed down?

[justin808]

@mmahalwy Order is important for sass. That's why there's two separate customization files. One for variables, and one for overriding the styles after they are declared. However, I think your point is valid.

The issue is that $brand-primary is being used by the other styles. I've only set $brand-primary and the other styles explicitly.

Based on checking the docs, I'd agree that we should change the order.

If I create a branch, will you try it out? Alternately, can you create a branch and create a PR? It would be nice to modify the example as well to show this use case.

Here's a reference: https://robots.thoughtbot.com/sass-default

[justin808]

Actually, I'll create a branch. Very simple.

[justin808]

@mmahalwy I'm not sure what to do about this one. I just tried, but in my use cases, I always refer to other bootstrap defined variables in my customization file. Check this out:

https://github.com/justin808/bootstrap-sass-loader-example/blob/master/_bootstrap-customizations.scss#L6

I'm guessing that I should just add another optional customization file. How's this look:

  // Use preBootstrapCustomizations to change $brand-primary. Ensure this preBootstrapCustomizations does not
  // depend on other bootstrap variables.
  preBootstrapCustomizations: "./_pre-bootstrap-customizations.scss",

  // Use bootstrapCustomizations to utilize other sass variables defined in preBootstrapCustomizations or the 
  // _variables.scss file. This is useful to set one customization value based on another value.
  bootstrapCustomizations: "./_bootstrap-customizations.scss",

[justin808]

See #10

@mmahalwy Please try this and if it works for you, I'll push a new build.

See http://forum.railsonmaui.com/t/debugging-nodejs-and-webpack-loaders/142 for how to npm link to setup local copies, or specify the repo and branch in your package.json file.

I also created this to demonstrate the fix:
shakacode/bootstrap-sass-loader-example#3

Thanks for the input!

[justin808]

@mmahalwy If you look at this example, you can see how the package.json references the branch: shakacode/bootstrap-sass-loader-example#3

bootstrap-sass-loader": "justin808/bootstrap-sass-loader#fix-order-defaults-sass-import",

[mmahalwy]

@justin808 going to give it a try later this evening. Sorry, lazt sunday and I am out :)

I'll try the PR and the examples and +1?

[mmahalwy]

Solved!