Config not producing correct styles

[tarciosaraiva]

Hi there, I've managed to get plugin working successfully and responding to changes in the config file but the styles are a bit off.

Here are some examples:

• note the space between the cells

• note the lack of space between the buttons

Most of it is fine though. I've compared against Bootstrap itself and the style seems fine, something else is throwing it off. If I just pull in the CSS from a CDN it all looks fine.

Here's my config:

var path    = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var DIST = path.resolve(__dirname, '../dist');
var APP  = path.resolve(__dirname, '../src/app');
var WEB  = path.resolve(__dirname, '../src/web');

module.exports = {
  entry: [
    'bootstrap-webpack!./config/bootstrap.config.js',
    path.resolve(APP, 'index.js')
  ],
  output: {
    path: DIST,
    filename: 'scripts/bundle.js'
  },
  devServer: {
    historyApiFallback: true,
    contentBase: DIST
  },
  debug: true,
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        test: APP,
        exclude: /node_modules/,
        query: { presets: ['es2015', 'react'] }
      },
      { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
      { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      API_HOST: JSON.stringify((process.env.API_HOST ? process.env.API_HOST : 'http://localhost:8000'))
    }),
    new HtmlWebpackPlugin({
      title: 'Heading',
      hash: true,
      template: path.resolve(WEB, 'index.html'),
      inject: false
    })
  ],
  devtool: 'source-map'
};

I'm using bootstrap@3.3.6.

Little help?

[gowravshekar]

Include only one style in your bootstrap.config.js, say buttons. Later you can compare the contents of the generated file with the buttons.less converted to css. This will help to debug the issue easily. You can also create a gist with bare minimums to reproduce the issue.

[gowravshekar]

Closed. No further inputs received.

[sundyxfan]

How to engage in the production environment ? @gowravshekar @tarciosaraiva

[gowravshekar]

@sundyxfan , Can you please elaborate your question.