Delving into the world of webpack for the first time has been quite a daunting experience! I'm attempting to set up the foundation for sites, but I feel completely lost when it comes to configuring it properly.
Here is my Webpack configuration:
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;
A snippet from master.scss:
@import "foundation";
@include foundation-everything;
Below is my directory structure:
https://i.stack.imgur.com/06SuL.png
Although the web app is functioning correctly, I am facing issues with 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 am seeing unappealing list items in outdated HTML format. Can you spot what I might be doing incorrectly?
Additional information: The foundation-sites package was installed using npm.