How can I access bootstrap variables? about bootstrap-sass-loader

[vjpr]

So I have switched to bootstrap-loader and sass-resources-loader.

I now have a file called variables.scss referenced in webpack.config.js in sassResources which contains:

@import './pre-customizations.scss';
@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss';
@import './customizations.scss';

This works well.

[justin808]

Hi @vjpr If you have one sass file, then so long as you defined the variable, you can see it.

By this, I mean, you need to put your sass in this config (name the file as you please). Then you can see all the bootstrap mixins, variables, etc.

  mainSass: "./main.scss", // path to your main SASS file (optional)

[vjpr]

I have a lots of sass files and they are required individually using webpack. I just want to import the variables. Sounds like it's not possible?

[justin808]

Hi @vjpr, that's not the way that sass works.

[vjpr]

It's how webpack loaders work. Each file is compiled into css. Then it is appended to the header in a style tag.

The way I am thinking is importing the bootstrap variables. Then importing the precustomization file with my modifications to the variables. Then I can access the variables.

[justin808]

@vjpr we're changing the way we're doing the assets parts as shown here: https://github.com/shakacode/react-webpack-rails-tutorial/

See our npm "sass-resources-loader"...

We'll have some more docs on this in the next couple of weeks.

The sass-resources loader will prepend any common definition files, which sounds like what you want!

[alex35mil]

@vjpr bootstrap-loader + sass-resources loader will solve it.

[alex35mil]

@vjpr Great, glad it helped 👍

[damassi]

After looking high and low for a solution, sass-resources-loader did it. Might be worthwhile to add a note in the bootstrap-loader README. 👍

[justin808]

@damassi Any chance that you can give us a PR note to the README.md. @alexfedoseev and I would super appreciate it! We're slammed with our new product release.

[damassi]

Will do.

EDIT: Just noticed that it is there, but that I missed it. Thanks!