javascript - Webpack bootstrap-loader load custom file after bootstrap -

i'm using webpack load bootstrap-sass using plugin bootstrap-loader

i've tried add custom .scss file , @ .bootstraprc setup this:

bootstrapversion: 3 styleloaders:  - style  - css  - sass  appstyles: ./src/sass/main.scss  styles:  # mixins mixins: true  # reset , dependencies normalize: true print: true glyphicons: true  # core css scaffolding: true type: true code: true grid: true tables: true forms: true buttons: true  # components component-animations: true dropdowns: true button-groups: true input-groups: true navs: true navbar: true breadcrumbs: true pagination: true pager: true labels: true badges: true jumbotron: true thumbnails: true alerts: true progress-bars: true media: true list-group: true panels: true wells: true responsive-embed: true close: true  # components w/ javascript modals: true tooltip: true popovers: true carousel: true  # utility classes utilities: true responsive-utilities: true  ### bootstrap scripts  scripts:   transition: true   alert: true   button: true   carousel: true   collapse: true   dropdown: true   modal: true   tooltip: true   popover: true   scrollspy: true   tab: true   affix: true 

the problem when build file, custom css load before bootstrap file.

my main.scss:

@import '~animate.css/animate.min.css';  $color: blue;  body{    color:$color; } 

as recheck body{} appear after bootstrap. import file before bootstrap.

is suppose or make mistake?

there option in .bootstraprc add styles bootstrap.

# import custom styles here. have access bootstrap variables. if require # sass files separately, not have access bootstrap variables, mixins, clases, etc. # endpoint-file contains list of @imports of application styles. appstyles: ./app/styles/app.scss