webpack配置extract-text-webpack-plugin插件为什么出错？

Question

错误信息：

ERROR in ./src/styles/App.css
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.module.exports.pitch (/Users/luojinghui/projects/react-redux/example-rr/node_modules/extract-text-webpack-plugin/loader.js:21:9)
 @ ./src/components/Main.js 66:0-25

webpack配置：

/**
'use strict';

const path = require('path');
const srcPath = path.join(__dirname, '/../src');
const dfltPort = 8000;

var ExtractTextPlugin = require("extract-text-webpack-plugin");

/**
 * Get the default modules object for webpack
 * @return {Object}
 */
function getDefaultModules() {
  return {
    preLoaders: [
      {
        test: /\.(js|jsx)$/,
        include: srcPath,
        loader: 'eslint-loader'
      }
    ],
    loaders: [
      {
        test: /\.css$/,
        // loader: 'style-loader!css-loader!autoprefixer-loader?{browsers: ["last 2 version", "firefox 15"]}'
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {
        test: /\.sass/,
        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
      },
      {
        test: /\.scss/,
        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
      },
      {
        test: /\.less/,
        loader: 'style-loader!css-loader!autoprefixer-loader?{browsers: ["last 5 versions","> 1%", "firefox 15"]}!less-loader?sourceMap'
      },
      {
        test: /\.styl/,
        loader: 'style-loader!css-loader!stylus-loader'
      },
      {
        test: /\.(png|jpg|gif|woff|woff2)$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /\.(mp4|ogg|svg)$/,
        loader: 'file-loader'
      }
    ],
    plugins: [
      new ExtractTextPlugin("App.css")
    ]
  };
}

module.exports = {
  srcPath: srcPath,
  publicPath: '/assets/',
  port: dfltPort,
  getDefaultModules: getDefaultModules
};

一直报错，为什么？

Answer 1

输入命令

for webpack 2

npm install --save-dev extract-text-webpack-plugin@2.1.2

for webpack 1

npm install --save-dev extract-text-webpack-plugin@1.0.1

https://www.npmjs.com/package...

Answer 2

程序没有错

建议重新安装 extract-text-webpack-plugin

Module build failed:

Answer 3

你看下你的package.json里面的extract-text-webpack-plugin坂本号，我使用^2.1.2这个就不会报错，使用^3.0.0就会报错，你可以尝试下

Answer 4

loaders: [

        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        }
    ]

Answer 5

最近我也在用vue-cli配置sass，同样各种报错，鼓秋两天两宿，刚刚解决，解决办法说来可笑：
我把vue-cli里的所有模块全部删除然后全部安装最新版本，安装node-sass和sass-loader就好了，无语，试试吧