webpackとfoundation cssを使用して反応するには？

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; 

Answer 2

Webpackの点で - 6.4はWebpackのサポートと一緒に出荷されますhttps://github.com/zurb/foundation-sites/pull/9965