0
我是新来的整个webpack的东西,到目前为止,它是巫术!我正在尝试为运行的网站奠定基础,并且我不知道如何正确设置它。基础站点包含在webpack中。不能使用stylogue
的WebPack配置
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;
我的目录结构:
的Web应用程序的工作,因为它应该,但渲染时:
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>
)
}
}
我在传统的old-skool HTML中看到了可怕的列表项。那么,我做错了什么?
注意 基础的网站经NPM安装。