css-loader、sass-loader not working webpack 2

Question

webpack 1からwebpack 2に移行しています。webpack migration guideに従っていますが、私のCSSファイルを解決する際にエラーが発生します。私はExtractTextPlugin.extractに "use"を使用しないようにウェブを試みましたが、それもうまくいきませんでした。 WebPACKのバージョン - "のWebPACK"： "2.2.1"、

Module parse failed: /home/gameon/Desktop/venue_lisiting/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!style-loader!css-loader!postcss-loader!sass-loader!/home/gameon/Desktop/venue_lisiting/src/styles/desktop.scss Unexpected character '@' (1:0) 
You may need an appropriate loader to handle this file type. 
| @media only screen and (min-width: 960px) { 
| @import "./Skeleton/skeleton"; 
| @import "colors"; 
@ ./src/index.js 9:0-32 


import webpack from 'webpack'; 
import HtmlWebpackPlugin from 'html-webpack-plugin'; 
import path from 'path'; 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
import autoprefixer from 'autoprefixer'; 

var loaders = [ 
    { 
    loader: 'css-loader', 
    options: { 
     modules: true 
    } 
    }, 
    { 
    loader: 'postcss-loader' 
    }, 
    { 
    loader: 'sass-loader' 
    } 
]; 


export default { 
    resolve: { 
    extensions: ['*', '.js', '.jsx', '.json'] 
    }, 
    devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool 
    entry: { 
    app: path.resolve(__dirname, 'src/index.js'), 
    vendor: ["react", "react-dom"], 
    hotReloading : 'webpack-hot-middleware/client?reload=true' 
    }, 
    target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test 
    output: { 
    path: path.resolve(__dirname, 'dist'), // Note: Physical src are only output by the production build task `npm run build`. 
    publicPath: '/', 
    filename: "[name].entry.chunk.js" 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '[name].[hash].js', }), 
    new ExtractTextPlugin("[name].css"), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom) 
     __DEV__: true 
    }), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    new HtmlWebpackPlugin({  // Create HTML file that includes references to bundled CSS and JS. 
     template: path.join(__dirname, './src/index.html'), 
     filename: 'index.html', 
     inject: 'body', 
     minify: { 
     removeComments: true, 
     collapseWhitespace: true 
     }, 
    }), 
    new webpack.LoaderOptionsPlugin({ 
     options: { 
     postcss: [ 
      autoprefixer(), 
     ] 
     } 
    }) 
    ], 
    module: { 
    rules: [ 
     { test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: "babel-loader", 
     options : { 
      presets: 'react' 
     } 
     } , 


     {test: /\.eot(\?v=\d+.\d+.\d+)?$/, 
     use : [ 
      { 
      loader : 'file' 
      } 
     ]}, 

     {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
      use : [ 
      { 
       loader : 'url', 
       options:{ 
       limit : "10000&mimetype=application/font-woff" 
       } 
      } 
      ]}, 

      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
      use : [ 
       { 
       loader : 'url', 
       options:{ 
        limit : "10000&mimetype=application/octet-stream" 
       } 
       } 
      ]}, 

      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
       use : [ 
       { 
        loader : 'url', 
        options:{ 
        limit : "10000&mimetype=image/svg+xml" 
        } 
       } 
       ]}, 
       {test: /\.(jpe?g|png|gif)$/i, 
       use : [ 
        { 
        loader : 'url', 
        options:{ 
         name : '[name].[ext]' 
        } 
        } 
       ]}, 
       {test: /\.ico$/, 
        use : [ 
        { 
         loader : 'url', 
         options:{ 
         name : '[name].[ext]' 
         } 
        } 
        ]}, 
        {test: /(\.css|\.scss)$/, 
        use :[ 
         { 
          loader: ExtractTextPlugin.extract({ 
          fallbackLoader: 'style-loader', 
          loader: loaders 
         }) 
         }] } 
        ] 
        }, 
       }; 

Answer 1

私はそれがとてもpostcssローダーが最後である必要があり、ローダーのためかもしれないと思います。とにかく、ここであなたが​​

はそれが役立ちます:)

Answer 2

pluginsで

new ExtractTextPlugin("[name].css"), 

を保ち、かつmodule中のようなCSSルールを変更ホープ従うことができWebPACKの2のための作業設定の例を持っていますこれは

... 
{ 
    test: /\.scss$/, 
    use: ExtractTextPlugin.extract({ 
     fallback: "style-loader", 
     use: [ 
      { 
       loader: 'css-loader', 
       options: { 
        modules: true 
       } 
      }, 
      'postcss-loader', 
      'sass-loader' 
     ] 
    }), 
}, 
...