如何将基础 css 与 webpack 一起使用并做出反应？答案

【问题标题】：How to use foundation css with webpack and react?如何将基础 css 与 webpack 一起使用并做出反应？
【发布时间】：2016-06-25 16:55:02
【问题描述】：

我的堆栈是 Horizon + React。我想在客户端使用foundation 6。我为我的 js 使用 webpack，但是当我尝试将它与 css 一起使用时，我只得到来自基础 css 的评论，但没有 css。

我的文件是：

webpack.config.js：

const path = require('path');

var config = {
    context: __dirname + "/src",
    entry: "./js/main.js",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass']
            }
        ]
    },
    resolve: {
        modulesDirectories: ['./node_modules']
    },
};
module.exports = config;

main.scss：

@import "../../node_modules/foundation-sites/scss/foundation";

main.js：

...
//adding css
require("../css/main.scss");
...

在我只看到的网页上：

/**
 * Foundation for Sites by ZURB
 * Version 6.2.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */

那我做错了什么？

【问题讨论】：

标签： reactjs zurb-foundation webpack horizon

【解决方案1】：

你需要@include你想使用的作品。例如，要包含所有内容：

@include foundation-everything;