webpack 2にインポートパスを適切に追加する方法

Question

webpack 2を使用して、インポートパスにfoundation scssを追加する正しい方法を理解できません。Compiling Manually sectionのFoundationドキュメントロードパスに 'node_modules/foundation-sites/scss'を追加して、webpack2がそれを見つけるようにする必要があります。

次に、フレームワークファイルをインポートパスとして追加します。 「 packages_folder /基礎-サイト/ SCSS

私はたくさんの同様の質問とwebpack2のドキュメントが、まだすることができ読んだ：あなたはどのようにこの は、ビルドプロセスに依存するが、パスに関係なく同じですそれが働くように見える。あなたが見ることができるように

const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: ['./src/index.js', './src/scss/main.scss'], 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist') 
    }, 
    devServer: { 
    contentBase: './dist' 
    }, 
    resolve: { 
    modules: [ 
     path.resolve(__dirname, "node_modules/foundation-sites/scss"), 
     "node_modules" 
    ], 
    extensions: [".js", ".json", ".scss"], 
    }, 
    module: { 
    rules: [ 
     { // scss loader for webpack 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']) 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin({ // define where to save the file 
     filename: 'styles.css', 
     allChunks: true 
    }) 
    ], 
} 

私はresolve.modulesキーを追加し、デフォルトnode_modulesディレクトリに加えてpath.resolve(__dirname, "node_modules/foundation-sites/scss")を追加しようとしました：これは私のwebpack.config.jsファイルです。

私はこれが私のメインのSCSSファイルで@import foundationに私を許可すると予想、しかし建物とき、私はエラーを取得する：誰もが、私はここで間違ってやっている

ERROR in ./src/scss/main.scss 
Module build failed: ModuleBuildError: Module build failed: 
@import 'foundation'; 
^ 
     File to import not found or unreadable: foundation. 

を知っていますか？インポートパスに基礎ディレクトリを適切に追加する方法を教えてください。

Answer 1

私は理由はわかりませんが、これは働いていた：

const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: ['./src/index.js', './src/scss/main.scss'], 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist') 
    }, 
    devServer: { 
    contentBase: './dist' 
    }, 
    module: { 
    rules: [ 
     { // scss loader for webpack 
     test: /\.scss$/, 
     use: [ 
      { 
      loader: 'css-loader' 
      }, 
      { 
      loader: 'sass-loader', 
      options: { 
       includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")] 
      } 
      } 
     ] 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin({ // define where to save the file 
     filename: 'styles.css', 
     allChunks: true 
    }) 
    ], 
} 

を