webpack && bootstrap

[sundyxfan]

webpack 'bootstrap-sass! ./ src / theme / bootstrap.config.js' ， it is doing what?

[jaraquistain]

That line is controlling how bootstrap-sass is loaded into the site. You can decide what bootstrap modules are included and excluded from the build to minimize size. Those options are specified in bootstrap.config.js. Personally, I opted to upgrade from bootstrap-sass-loader to bootstrap-loader which uses a .bootstraprc config file in the root instead of of bootstrap.config.js

[olalonde]

Anyone else getting '[object Object]' instead of the actual style in development? Stuck with this bug

edit: oh, had to rename it in my webpack-isomorphic-tools.js file as well

[sundyxfan]

Such is the way css style embed html , which is the loss of the cache means, but how to link incorporated ? @jaraquistain @olalonde

[olalonde]

This is just available in development mode as far as I know. It writes the style inline with the html helps to avoid the "flash of unstyled content" when doing a full refresh in development (see the helpers/Html.js file).

[sundyxfan]

How to engage in the production environment ?

[josephdburdick]

@jaraquistain would you mind sharing your implementation? I'm trying to do the same thing.

[jaraquistain]

@josephdburdick sure, here are all the relevant parts of my webpack/dev.config.js and webpack/prod.config.js:

entry: {
    "main": [
      "bootstrap-loader/extractStyles",
      "./src/client.js"
    ]
  }

module: {
    loaders: [
      ...
      { test: /\.scss$/, loader: ExtractTextPlugin.extract("style", "css?importLoaders=2&sourceMap!postcss-loader!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&includePaths[]=node_modules") },
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader')}
    ]
  }

postcss: function() {
    return [autoprefixer({ browsers: ['last 2 versions'] })]
  }

I think that's all the pieces of it and they should be the same for prod/dev