Not applying classes?

[yanickrochon]

This code

<Grid>
  <Row>
    <Col xs={12} sm={6} md={4} lg={3}>
      Widget
    </Col>
    <Col xs={12} sm={6} md={4} lg={3}>
      Widget
    </Col>
    <Col xs={12} sm={6} md={4} lg={3}>
      Widget
    </Col>
    <Col xs={12} sm={6} md={4} lg={3}>
      Widget
    </Col>
    <Col xs={12} sm={6} md={4} lg={3}>
      Widget
    </Col>
    <Col xs={12} sm={6} md={4} lg={3}>
      Widget
    </Col>
    <Col xs={12} sm={6} md={4} lg={3}>
      Widget
    </Col>
  </Row>
</Grid>

produces this HTML

<div class="">
  <div class="">
    <div class="   ">Widget</div>
    <div class="   ">Widget</div>
    <div class="   ">Widget</div>
    <div class="   ">Widget</div>
    <div class="   ">Widget</div>
    <div class="   ">Widget</div>
    <div class="   ">Widget</div>
  </div>
</div>

☹️

EDIT: All dependencies are installed, and there are no console errors.

EDIT: After seeing the documented issue, how do I use this with Meteor?

[yanickrochon]

Related to #32 but no one seem to have resolved it, really.

[lephuhai]

I have same issues.

[lephuhai]

Related to #21, thanks to @Marmelatze

Adding ?modules to the loader fixed it for me:

{
    test: /\.css/,
    loader: "style!css?modules"
}

[dyst5422]

Moving to webpack 2 I ran into this.

new webpack 2 config:

const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');
const isDev = require('isdev');
const Visualizer = require('webpack-visualizer-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const { Dir } = require('./.config');

let Config = {
  entry: [
    'babel-polyfill',
    path.join(Dir.src, '/index.jsx'),
  ],
  output: {
    path: Dir.build,
    filename: 'bundle.js',
  },
  resolve: {
    modules: [Dir.src, 'node_modules'],
    extensions: ['.js', '.json', '.jsx'],
    alias: {
      config: './.config.js',
    },
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.jsx?$/,
        loader: 'eslint-loader',
        exclude: Dir.node_modules,
        include: Dir.src,
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: Dir.node_modules,
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: 'css-loader?modules',
        }),
        include: /flexboxgrid/,
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: 'css-loader!less-loader',
        }),
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: 'css-loader!sass-loader',
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({ filename: 'styles.css', allChunks: true }),
    new webpack.EnvironmentPlugin([
      'NODE_ENV',
      'PRONTTO_CORE',
      'HOST',
    ]),
  ],
};

if (!isDev) {
  Config = merge(Config, {
    bail: true,
    devtool: 'cheap-module-source-map',
    output: { publicPath: '/build/' },
    plugins: [
      new Visualizer(),
      new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false,
      }),
    ],
  });
}

if (isDev) {
  Config = merge(Config, {
    devtool: 'cheap-module-eval-source-map',
    entry: ['webpack-hot-middleware/client'],
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
    ],
  });
}

const WebpackConfig = Config;
module.exports = WebpackConfig;

old webpack config:

import webpack from 'webpack';
import merge from 'webpack-merge';
import path from 'path';
import isDev from 'isdev';
import { Dir } from './config';

const TARGET = process.env.npm_lifecycle_event;

let Config = {
  entry: [
    'babel-polyfill',
    path.join(Dir.src, '/src/index.jsx'),
  ],
  output: {
    path: Dir.build,
    filename: 'bundle.js',
  },
  resolve: {
    fallback: 'node_modules',
    alias: {
      logger: './webclient/utilities/logger',
      slackMessage: './webclient/utilities/slackMessage',
    },
    root: Dir.src,
    extensions: ['.js', '.json', '.jsx', ''],
  },
  module: {
    eslint: {
      configFile: './.eslintrc',
    },
    preLoaders: [
      {
        test: /\.jsx?$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        include: Dir.src,
      },
    ],
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        loader: 'style!css?modules',
        include: /flexboxgrid/,
      },
    ],
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
  ],
};

if (TARGET === 'build:prod' && !isDev) {
  Config = merge(Config, {
    bail: true,
    devtool: 'source-map',
    output: { publicPath: '/build/' },
    plugins: [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        comments: false,
        dropDebugger: true,
        dropConsole: true,
        compressor: {
          warnings: false,
        },
      }),
    ],
  });
}

if (TARGET === 'server:dev' && isDev) {
  Config = merge(Config, {
    devtool: 'source-map',
    entry: ['webpack-hot-middleware/client'],
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
    ],
  });
}

const WebpackConfig = Config;
export default WebpackConfig;

Everything else is working fine. Hopefully someone has some insight.

[h0x539]

@dyst5422 thanks, it works perfectly !

I encountered the error Chunk.entry was removed. Use hasRuntime() but I installed
npm --save install extract-text-webpack-plugin@^2.0.0-beta and used
new ExtractTextPlugin({ filename: 'styles.css', allChunks: true, disable: false })

[silvenon]

Using CSS Modules are currently mandatory for react-flexbox-grid to work. Subscribe to #60 to get updates about supporting regular classes as well.