foundation-sites inclusion in webpack. Can't use stylings

Question

I'm new to the whole webpack thing, and so far, it's witchcraft! I'm trying to get foundation for sites running, and I don't have a clue how to set it up properly.

Webpack config

var webpack = require('webpack');
var path = require('path');

var config = {
    entry: './src/client/app/index.jsx',
    output: {
        path: __dirname + '/src/client/public/',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                include: __dirname + '/src/client/app',
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.(css|scss)$/,
                loader: 'sass-loader'
            }
        ]
    }
};

module.exports = config;

master.scss

@import "foundation";

@include foundation-everything;

My directory structure:

The web app works as it should, but when rendering:

import React from 'react';
import {render} from 'react-dom';

import './styles/navigation.scss';

export default class Navigation extends React.Component {
    render() {
        return (
            <div className="top-bar topbar-background">
                <div className="top-bar-left">
                    <ul className="menu">
                        <li className="menu-text">App</li>
                        <li><a href="/">Home</a></li>
                        <li><a href="/services">Services</a></li>
                    </ul>
                </div>
                <div className="top-bar-right">
                    <ul className="menu">
                        <li><a href="/login">Login/Register</a></li>
                        <li><a href="/terms">Terms</a></li>
                    </ul>
                </div>        
            </div>
        )
    }
}

I see horrible list items in traditional old-skool HTML. So, what am I doing wrong?

Notes foundation-sites was installed via npm.

Answer 1

You should check out the Webpack foundation-sites loader .

Sample webpack config:

module.exports = {
  module: {
    loaders: [
      // **IMPORTANT** This is needed so that each foundation js file required by
      // foundation-webpack has access to the jQuery object
      { test: /foundation\/js\//, loader: 'imports?jQuery=jquery' }
    ]
  }
};