Load Order

[tomasbarrios]

Hi, I am facing an issue with bootstrap-loader.

When importing bootstrap, it adds the bootstrap css tag after what is in bootstrap-customizations.scss. And those are meant to override bootstrap variables.

As you can see in the picture above, Bootstrap styles are loaded last instead of first

bootstrap-customizations.scss

@import "~bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css";
@import "~bootstrap-social/bootstrap-social.css";
@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

.bootstraprc

---
# 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: 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.
# preBootstrapCustomizations: ./app/assets/styles/bootstrap-pre-customizations.scss

# This gets loaded after bootstrap/variables is loaded
# So you can refer to bootstrap variables
bootstrapCustomizations: ./app/assets/styles/bootstrap-customizations.scss

# With CSS Modules we load all application styles directly in React components
# appStyles: ./app/styles/app.scss

### Bootstrap styles
styles:

  # Mixins
  mixins: true

  # Reset and dependencies
  normalize: false
  print: false
  glyphicons: false

  # 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

[justin808]

The bootstrap loader is only the webpack loader. It does not handle how you export the CSS. That can be either in your JS (default) or extracted via the extract-text-plugin.

These are the 2 places that you put your customizations. The difference with these is that if you want to use derived bootstrap variables, use the second place. If you want to set bootstrap variables that are used to derive other variables, use the first place.

# This gets loaded after bootstrap/variables is loaded
# So you can refer to bootstrap variables
bootstrapCustomizations: ./app/assets/styles/bootstrap-customizations.scss

# With CSS Modules we load all application styles directly in React components
# appStyles: ./app/styles/app.scss

Please request to re-open if this does not solve your issue.

[tomasbarrios]

I understand what you mean, that is why I am using the file for post customizations. I want to override bootstrap styles with this list

@import "~bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css";
@import "~bootstrap-social/bootstrap-social.css";
@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

The problem is that the bootstrap styles are loaded after the above styles. This is the order of the styles:

Loads vendor.js (ok) Loads bootstrap-customizations.scss (in seperate style tags) (ok) Loads bootstrap styles... (but after, it should be before!)

My goal is that they load like these:

Loads vendor.js Loads bootstrap styles... Loads bootstrap-customizations.scss (in separate style tags)

[tomasbarrios]

I think I probably misunderstood what bootstrap-customizations.scss is doing.

My final goal is to append a file where I override bootstrap styles. How should I do it?

Thanks.

[thepatrick]

I have this same problem - Even if I require('bootstrap-loader'); require('./my.css') my css ends up being loaded before bootstrap, which means it doesn't work right.

This applies whether I'm using extract-text-webpack-plugin or not. No matter what, bootstrap-loader always puts my css first.

[tomasbarrios]

I ended up creating a new JS file just lo load css that should be loaded after. Add a new entry like ...

entry: {
    // See use of 'vendor' in the CommonsChunkPlugin inclusion below.
    vendor: [
      'babel-polyfill',
      'es5-shim/es5-shim',
      'es5-shim/es5-sham',
      'jquery',
    ],
    rails: [
      './app/styleEntry.js'
    ],
    app: [
      './app/bundles/Calendar/startup/calendarRegistration',      
      'es5-shim/es5-shim',
      'es5-shim/es5-sham',
      'babel-polyfill',
      ...
    ],

and then in styleEntry.js do something like these:

import "bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css";
import "bootstrap-social/bootstrap-social.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

You will have to explicitly include these new bundle in your rails asset file, e.g.

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *= require rails-bundle
...<require other rails gem stuff>
 *= require_self
 *= require_tree ./common
 */

Also, I had to modify the css loaders to these:

config.module.loaders.push(
  {
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
  },
  {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract(
      'style',
      'css?minimize&importLoaders=1' +
      '!postcss'
    ),
  },
  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract(
      'style',
      'css?minimize&importLoaders=3' +
      '!postcss' +
      '!sass' +
      '!sass-resources'
    ),
  },
  // ... more loaders
);