使用Bootstrap 4和Sass（和Bower）？

Question

I'm learning to use Sass (never used a CSS pre-processor before), and I'm wondering how to use it with Bootstrap 4 properly.

Should I include in my header.php files the bootstrap.min.css? Then when I need to use a Sass mixin or some variable, do I include it in my .scss file?

OR

Should I include all of bootstrap.scss in my styles.scss, then compile it to one style.css and only include that?

Thanks for your guys' help.

Answer 1

You should have a main file (a Sass manifest) where you import your Sass variables, mixins and partials as well as the Bootstrap library. After that's in place Sass will automatically output a CSS file you can include on your header.php file.

Gotchas

• Import only the bits you need from Bootstrap (instead of the whole library). Here's a handly list where you can see the components you can choose from .
• Make sure to create variables.scss file based on the template Bootstrap provides .
• Make sure to import the variables file before the Bootstrap library so it takes effect.
• Use Sass in watch mode on development