Flexboxgrid media rules doesn't import globally from react-starter-kit

[blitss]

I'm trying to import flexboxgrid css module from starter-kit.
I've added import rule to Layout.css:
@global-import 'flexboxgrid' ;
But media rules are using local names:

Here's an example: https://github.com/Blitss/react-starter-kit
What can I do to fix it? I'm using node v7.9.0 on Windows

[frenzzy]

You can specify two css loaders in your tools/webpack.config.js for local and global styles separately like so:

{
  test: /\.css$/,
  include: [path.resolve(__dirname, '../src')], // Internal Styles
  use: [
    { loader: 'isomorphic-style-loader' },
    { loader: 'css-loader', // CSS Modules Enabled
      options: {
        importLoaders: 1,
        sourceMap: isDebug,
        modules: true,
        localIdentName: isDebug ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]',
        minimize: !isDebug,
        discardComments: { removeAll: true },
    } },
    { loader: 'postcss-loader', options: { config: './tools/postcss.config.js' } },
  ],
},
{
  test: /\.css$/,
  exclude: [path.resolve(__dirname, '../src')], // External Styles
  use: [
    { loader: 'isomorphic-style-loader' },
    { loader: 'css-loader', // CSS Modules Disabled
      options: {
        sourceMap: isDebug,
        minimize: !isDebug,
        discardComments: { removeAll: true },
      } },
  ],
},

Then import external css inside your component:

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import external from 'external.css';
import s from './MyComponent.css';

class MyComponent extends React.Component {
  render() {
    return <div className={s.local}><div className="global">Hi</div></div>
  }
}

export default withStyles(external, s)(MyComponent);

[langpavel]

Merge latest changes and import your file from JS, like normalize.css is now. Do not @import from css!