Skip to content

Instantly share code, notes, and snippets.

Created January 30, 2017 10:21
Show Gist options
  • Save sebastianhaas/81667032d4fab9fa52e5dd46621f9bc6 to your computer and use it in GitHub Desktop.
Save sebastianhaas/81667032d4fab9fa52e5dd46621f9bc6 to your computer and use it in GitHub Desktop.
.bootstraprc for bootstrap@4.0.0-alpha.6 with bootstrap-loader@2.0.0-beta.20
# Output debugging info
# loglevel: debug
# Major version of Bootstrap: 3 or 4
bootstrapVersion: 4
# If Bootstrap version 4 is used - turn on/off flexbox model
useFlexbox: true
# Webpack loaders, order matters
- style-loader
- css-loader
- postcss-loader
- sass-loader
# Extract styles to stand-alone css file
# Different settings for different environments can be used,
# It depends on value of NODE_ENV environment variable
# This param can also be set in webpack config:
# entry: 'bootstrap-loader/extractStyles'
extractStyles: false
# env:
# development:
# extractStyles: false
# production:
# extractStyles: true
# Customize Bootstrap variables that get imported before the original Bootstrap variables.
# Thus original Bootstrap variables can depend on values from here. All the bootstrap
# variables are configured with !default, and thus, if you define the variable here, then
# that value is used, rather than the default. However, many bootstrap variables are derived
# from other bootstrap variables, and thus, you want to set this up before we load the
# official bootstrap versions.
# For example, _variables.scss contains:
# $input-color: $gray !default;
# This means you can define $input-color before we load _variables.scss
# preBootstrapCustomizations: ./app/styles/bootstrap/pre-customizations.scss
# This gets loaded after bootstrap/variables is loaded and before bootstrap is loaded.
# A good example of this is when you want to override a bootstrap variable to be based
# on the default value of bootstrap. This is pretty specialized case. Thus, you normally
# just override bootrap variables in preBootstrapCustomizations so that derived
# variables will use your definition.
# For example, in _variables.scss:
# $input-height: (($font-size-base * $line-height) + ($input-padding-y * 2) + ($border-width * 2)) !default;
# This means that you could define this yourself in preBootstrapCustomizations. Or you can do
# this in bootstrapCustomizations to make the input height 10% bigger than the default calculation.
# Thus you can leverage the default calculations.
# $input-height: $input-height * 1.10;
# bootstrapCustomizations: ./app/styles/bootstrap/customizations.scss
# Import your custom styles here. You have access to all the bootstrap variables. If you require
# your sass files separately, you will not have access to the bootstrap variables, mixins, clases, etc.
# Usually this endpoint-file contains list of @imports of your application styles.
# appStyles: ./app/styles/app.scss
### Bootstrap styles
# Mixins
mixins: true
# Reset and dependencies
normalize: true
print: true
# Core CSS
reboot: true
type: true
images: true
code: true
grid: true
tables: true
forms: true
buttons: true
# Components
transitions: true
dropdown: true
button-group: true
input-group: true
custom-forms: true
nav: true
navbar: true
card: true
breadcrumb: true
pagination: true
jumbotron: true
alert: true
progress: true
media: true
list-group: true
responsive-embed: true
close: true
badge: false
# Components w/ JavaScript
modal: true
tooltip: true
popover: true
carousel: true
# Utility classes
utilities: true
### Bootstrap scripts
alert: true
button: true
carousel: true
collapse: true
dropdown: true
modal: true
popover: true
scrollspy: true
tab: true
tooltip: true
util: true
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment