WebpackがSCSS（ExtractTextPlugin）を変換していません

Question

私の.scss（main.scss）ファイルをCSSファイルにコンパイルするにはwebpack（2.2.1）の取得に問題があります。すべての正しいソースファイルはありますが、css出力は作成されません。

私は別のガイドのトンを見てきましたし、それらはすべて、それが私に似た設定で作業を取得するように見えたしました。

覚えておくべき事は、私がwebpack --debug --display-error-details --watchとのWebPACKを実行しているということで、エラーが（ちょうど何もCSS出力）はありません。

私のWebPACKの設定は次のようになります。

dist/ 
    static/ 
     scripts/ 
     styles/ 
node_modules/ 
src/ 
    actions/ 
    components/ 
    constants/ 
    containers/ 
    lib/ 
    reducers/ 
    scss/ 
     main.scss 
    store/ 
    app.js 
package.json 
webpack.config.js 

とのWebPACKのウォッチングからの出力は、いくつかのためので、この

Hash: 46d75c2b162f5e746664 
Version: webpack 2.2.1 
Time: 1675ms 
    Asset Size Chunks     Chunk Names 
bundle.js 831 kB  0 [emitted] [big] main 
    [12] ./~/react/react.js 56 bytes {0} [built] 
    [20] ./~/react/lib/React.js 2.69 kB {0} [built] 
    [27] ./~/redux/es/index.js 1.08 kB {0} [built] 
    [34] ./~/react-redux/es/index.js 194 bytes {0} [built] 
    [96] ./src/app.js 780 bytes {0} [built] 
[104] ./src/containers/App.js 980 bytes {0} [built] 
[105] ./src/containers/ChoiceContainer.js 1.18 kB {0} [built] 
[106] ./src/containers/ResultContainer.js 623 bytes {0} [built] 
[107] ./src/containers/TimeContainer.js 1.15 kB {0} [built] 
[109] ./src/reducers/Reducers.js 583 bytes {0} [built] 
[111] ./src/store/SleepStore.js 378 bytes {0} [built] 
[136] ./~/react-dom/index.js 59 bytes {0} [built] 
[150] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built] 
[209] ./~/react-redux/es/connect/connect.js 5.34 kB {0} [built] 
[235] multi ./src/app.js 28 bytes {0} [built] 
    + 221 hidden modules 
✨ Done in 2.26s. 

です：

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

module.exports = { 
    entry: [ 
     './src/app.js' 
    ], 
    output: { 
     path: 'dist/static/scripts', 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader', 
       query: { presets: [ 'es2015', 'react' ] } 
      }, 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract('css!sass') 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin({ 
      filename: 'dist/static/styles/[name].css', 
      allChunks: true 
     }) 
    ], 
    devServer: { 
     contentBase: './dist', 
     hot: true 
    }, 
}; 

ディレクトリ構造がとても似ていますscssファイルが正しいモジュールローダーであるにもかかわらず、考慮されていない、または監視されていないという奇妙な理由stをwebpack構成に入れます。 ExtractTextPluginが正しく設定されているように見え、設定変更によってエラーがスローされます。

これがなぜ機能しないのか理解できる人がいますか？

Answer 1

あなたはapp.jsであなたのSCSSモジュールをrequire/importする必要があります。