Babel + Webpack Integration

[driverpt]

Hello,

First of all, awesome work you've done, but i'm trying to integrate your components with react-starter-kit and i'm getting the following error:

/Users/<user>/Projects/<project>/node_modules/react-foundation-components/lib/top-bar/_styles.scss:1
(function (exports, require, module, __filename, __dirname) { @import '../common';
                                                              ^
SyntaxError: Invalid or unexpected token

[aruberto]

Did you want to use library in CSS Modules mode and if so is sass-loader setup in your webpack config?

If you don't want to use CSS Modules and have CSS globally available, import components from 'react-foundation-components/lib/global' instead.

example

import TopBar from 'react-foundation-components/lib/global/top-bar'

[ghost]

I'm having the same problem with this in my webpack config:

const config = {
  module: {
    rules: [{
        test: /\.scss$/,
        loaders: [
          'style-loader',
          'css-loader?modules&importLoaders=2&localIdentName=[local]___[hash:base64:5]',
          'sass-loader',
          'postcss-loader?parser=postcss-scss'
        ]
    }]
  }
};

I'm using an isomorphic boilerplate, so the server.js script also has it configured:

const config = {
  module: {
    rules: [{
        test: /\.scss$/,
        loaders: [
          'isomorphic-style-loader',
          'css-loader?modules&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
          'sass-loader'
        ]
    }]
  }
};

I was able to use global syntax above as a workaround at least.

[ghost]

Ah never mind, I tried to do

import { Callout } from 'react-foundation-components';

which causes the error, but if I do

import Callout from 'react-foundation-components/lib/Callout';

then the error goes away, while using the above configuration.