基礎站點包含在webpack中。不能使用stylogue

Question

我是新來的整個webpack的東西，到目前爲止，它是巫術！我正在嘗試爲運行的網站奠定基礎，並且我不知道如何正確設置它。

的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安裝。

Answer 1

您應該查看Webpack foundation-sites loader。

樣品的WebPack配置：

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' } 
    ] 
    } 
};