Webpack2は、CSSの代わりにsass/scssをjsにコンパイルします

Question

すべての.scssファイルを1つのCSSファイルにコンパイルするWebpackスクリプトを作成しました。私がgulp/gruntの代わりにwebpackを選んだのは、すべてのコンパイルが完了した単一の設定ファイルを持つほうが簡単だと思ったからです。

私が直面している問題は、scssファイルがjavascriptコードにコンパイルされていることです。これはwebpackがデフォルトで行うことですか？

どのようにしてCSSにするのですか？

コード：

module.exports = { 
    entry: glob.sync('./src/components/**/*.scss') , 
    output: { 
     path: path.resolve(__dirname, 'public', 'css'), 
     filename: 'styles.css' 
    }, 
    module: { 
         loaders: [ 
      { 
      test: /\.scss$/, 
      loaders: ['style-loader', 'css-loader', 'sass-loader'] 

      } 
     ] 
    } 
}; 

Answer 1

あなたはextract-text-webpack-pluginを使用する必要があります。プラグインをインストールした後、あなたはあなたが使用する必要が

{ 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader", "sass-loader") 
    } 

プラグインフィールドを追加します

module.exports = { 
    ..... 
    plugins: [ 
     new ExtractTextPlugin({filename: 'styles.css'}) 
    ] 
    ... 
}