css - foundation-sites 包含在 webpack 中。不能使用样式

Question

我是整个 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>
        )
    }
}

我在传统的老式 HTML 中看到可怕的列表项。那么，我做错了什么？

注意事项 foundation-sites 是通过 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' }
    ]
  }
};