reactjs - Foundation CSSをwebpackで使用して反応させる方法は?

Question

私のスタックは Horizo​​n + 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
 */

それで、私は何を間違っていますか？

Answer 1

@include使いたいピースが必要です。たとえば、すべてを含めるには:

@include foundation-everything;

関連するドキュメントは次のとおりです。

• http://foundation.zurb.com/sites/docs/sass.html#adjusting-css-output

おまけのヒント: Webpack を使用する~と、モジュール ディレクトリからインポートできます。

@import "~foundation-sites/scss/foundation";
@include foundation-everything;