Bootstrap CSS not extracted in staging environment

[Nicolas Rodriguez]

Hi!

I'm using bootstrap-loader in a Rails app with rails/webpacker.
In .bootstraprc I have extractStyles: true and in dev environment everything works fine.
CSS is well extracted and if I compile the assets, Bootstrap CSS in included in application.css :

-rw-r--r-- 1 nicolas nicolas 5,3M 24 mars  20:11 application-049b5d1e8444214cc22f.js
-rw-r--r-- 1 nicolas nicolas 6,2M 24 mars  20:11 application-049b5d1e8444214cc22f.js.map
-rw-r--r-- 1 nicolas nicolas 523K 24 mars  20:11 application-ba79829fdc917de9a34f491b7b7c6ea1.css
-rw-r--r-- 1 nicolas nicolas 893K 24 mars  20:11 application-ba79829fdc917de9a34f491b7b7c6ea1.css.map
-rw-r--r-- 1 nicolas nicolas 484K 24 mars  20:11 devise-db1383b88e683d491c1f.js
-rw-r--r-- 1 nicolas nicolas 588K 24 mars  20:11 devise-db1383b88e683d491c1f.js.map
-rw-r--r-- 1 nicolas nicolas 311K 24 mars  20:11 devise-eefd76f14bf8d4899b134eaf8fe535de.css
-rw-r--r-- 1 nicolas nicolas 388K 24 mars  20:11 devise-eefd76f14bf8d4899b134eaf8fe535de.css.map

But in staging environment Bootstrap CSS is not included in application.css :

-rw-r--r-- 1 concerto concerto 3.1M Mar 24 20:03 application-28318dabb2509e0f7a29.js
-rw-r--r-- 1 concerto concerto 980K Mar 24 20:03 application-28318dabb2509e0f7a29.js.gz
-rw-r--r-- 1 concerto concerto 2.9M Mar 24 20:03 application-28318dabb2509e0f7a29.js.map
-rw-r--r-- 1 concerto concerto 306K Mar 24 20:03 application-c53f87d90c33f3727af51c63da9a7553.css
-rw-r--r-- 1 concerto concerto  53K Mar 24 20:03 application-c53f87d90c33f3727af51c63da9a7553.css.gz
-rw-r--r-- 1 concerto concerto  90K Mar 24 20:03 application-c53f87d90c33f3727af51c63da9a7553.css.map
-rw-r--r-- 1 concerto concerto 370K Mar 24 20:03 devise-21428c884bc54ad49b25.js
-rw-r--r-- 1 concerto concerto  82K Mar 24 20:03 devise-21428c884bc54ad49b25.js.gz
-rw-r--r-- 1 concerto concerto 230K Mar 24 20:03 devise-21428c884bc54ad49b25.js.map
-rw-r--r-- 1 concerto concerto 130K Mar 24 20:03 devise-ec08100f85d070fd1532fabc9299115b.css
-rw-r--r-- 1 concerto concerto  27K Mar 24 20:03 devise-ec08100f85d070fd1532fabc9299115b.css.gz
-rw-r--r-- 1 concerto concerto  42K Mar 24 20:03 devise-ec08100f85d070fd1532fabc9299115b.css.map

Note the size difference :

-rw-r--r-- 1 nicolas nicolas 523K 24 mars  20:11 application-ba79829fdc917de9a34f491b7b7c6ea1.css # DEV
-rw-r--r-- 1 concerto concerto 306K Mar 24 20:03 application-c53f87d90c33f3727af51c63da9a7553.css # STAGING

In dev :

head public/packs/back_office/application-ba79829fdc917de9a34f491b7b7c6ea1.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en);@charset "UTF-8";

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

In staging :

head public/packs/back_office/application-c53f87d90c33f3727af51c63da9a7553.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en);
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

In staging the file starts with animate.css while it should start with normallize.css (animate.css is included after bootstrap).

Here my .bootstraprc file :

---
# Output debugging info
# loglevel: debug

# Major version of Bootstrap: 3 or 4
bootstrapVersion: 3

# If Bootstrap version 3 is used - turn on/off custom icon font path
useCustomIconFontPath: false

# Webpack loaders, order matters
styleLoaders:
  - style
  - css
  - sass

# 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: true
env:
  development:
    extractStyles: true
  staging:
    extractStyles: true
  production:
    extractStyles: true


# Customize Bootstrap variables that get imported before the original Bootstrap variables.
# Thus, derived Bootstrap variables can depend on values from here.
# See the Bootstrap _variables.scss file for examples of derived Bootstrap variables.
#
# preBootstrapCustomizations: ./path/to/bootstrap/pre-customizations.scss


# This gets loaded after bootstrap/variables is loaded
# Thus, you may customize Bootstrap variables
# based on the values established in the Bootstrap _variables.scss file
#
# bootstrapCustomizations: ./path/to/bootstrap/customizations.scss


# Import your custom styles here
# Usually this endpoint-file contains list of @imports of your application styles
#
# appStyles: ./path/to/your/app/styles/endpoint.scss


### Bootstrap styles
styles:

  # Mixins
  mixins: true

  # Reset and 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

Thank you!

[Nicolas Rodriguez]

Got it : the npm_modules dir is symlinked. See usage :

(... or you symlink your npm_modules directory), you may pass the absolute path of the .bootstraprc file to the loader in your webpack config