Webpack 网页包3：使用sass加载器和ExtractTextPlugin'；行不通

我一直在尝试在webpack中使用sass加载程序，我遵循以下说明->但这不起作用

有人能帮我吗？

存储库

错误

ERROR in   Error: Child compilation failed:
  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

  - 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

依赖关系

node v6.11.1
npm 5.3.0

├── babel-cli@6.26.0
├── babel-loader@7.1.2
├── babel-plugin-transform-class-properties@6.24.1
├── babel-polyfill@6.26.0
├── babel-preset-es2015@6.24.1
├── babel-preset-stage-3@6.24.1
├── css-loader@0.28.7
├── extract-text-webpack-plugin@3.0.0
├── html-loader@0.5.1
├── html-webpack-plugin@2.30.1
├── markdown-loader@2.0.1
├── node-sass@4.5.3
├── sass-loader@6.0.6
├── style-loader@0.18.2
├── webpack@3.5.6
└── webpack-dev-server@2.7.1

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

module.exports = {
    entry: [
      "./index.js"
    ],
    output: {
        path: __dirname + "/dist",
        filename: "index.bundle.js"
    },
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
            { test: /\.md$/, loaders: [ "html-loader", "markdown-loader" ] },
            { test: /\.scss$/,
              use: ExtractTextPlugin.extract({
                  fallback: 'style-loader',
                  use: ['css-loader', 'sass-loader']
              })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('style.css'),
        new HtmlWebpackPlugin({
          template: 'index.html',
          inject: 'body'
        })
    ],
    devtool: "eval-source-map",
    devServer: {
        filename: "index.bundle.js",
        contentBase: "./",
        port: 3000,
        publicPath: "/",
        stats: {
            colors: true
        }
    }
};

webpack.config.js

node v6.11.1
npm 5.3.0

├── babel-cli@6.26.0
├── babel-loader@7.1.2
├── babel-plugin-transform-class-properties@6.24.1
├── babel-polyfill@6.26.0
├── babel-preset-es2015@6.24.1
├── babel-preset-stage-3@6.24.1
├── css-loader@0.28.7
├── extract-text-webpack-plugin@3.0.0
├── html-loader@0.5.1
├── html-webpack-plugin@2.30.1
├── markdown-loader@2.0.1
├── node-sass@4.5.3
├── sass-loader@6.0.6
├── style-loader@0.18.2
├── webpack@3.5.6
└── webpack-dev-server@2.7.1

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

module.exports = {
    entry: [
      "./index.js"
    ],
    output: {
        path: __dirname + "/dist",
        filename: "index.bundle.js"
    },
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
            { test: /\.md$/, loaders: [ "html-loader", "markdown-loader" ] },
            { test: /\.scss$/,
              use: ExtractTextPlugin.extract({
                  fallback: 'style-loader',
                  use: ['css-loader', 'sass-loader']
              })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('style.css'),
        new HtmlWebpackPlugin({
          template: 'index.html',
          inject: 'body'
        })
    ],
    devtool: "eval-source-map",
    devServer: {
        filename: "index.bundle.js",
        contentBase: "./",
        port: 3000,
        publicPath: "/",
        stats: {
            colors: true
        }
    }
};

这一问题来自于美国。

index.html

由

html网页包插件处理，出于某种原因，它仍然尝试处理require调用（和）。原因可能是
html网页包插件的自定义EJS加载程序

最简单的解决方案是从
index.html
中完全删除注释过的代码

通过导入
.scss
文件，您配置的规则将应用于该文件。但实际的
提取文本网页包插件
实例在该过程中似乎不可用。您在这些require调用中使用的是内联加载程序，但您配置的规则仍将应用于该调用。为了防止应用其他加载程序，可以在导入前加上

从：

所有普通装载机都可以通过前缀
省略（覆盖）

可以通过前缀
-，省略（覆盖）所有普通加载程序和预加载程序

所有普通、post和pre-LOADER都可以通过前缀
省略（覆盖）

为了能够在HTML中正确使用CSS，您还需要在
sass加载器
之后使用
CSS加载器
，因为EJS需要JavaScript，而不是纯CSS。要求是：

<%= require("!css-loader!sass-loader!\./sass/index.scss") %>



最好在实际应用程序中导入
index.scss
，而不是
html网页包插件所使用的模板
我来这里是因为我对webpack 3+Sass+React的配置也不起作用

然而，就我而言，这个问题非常愚蠢。我必须说，我用
createreact-app
工具创建了这个项目，它设置了一个
webpack.config.dev.js
文件，配置非常复杂/完整

问题是我在
exclude
one之后添加了
sass
规则，它在注释（hah）中明确表示，在该规则之后的每个加载程序都将无法工作

所以现在看起来是这样的，而且很有效：

      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [require.resolve('css-loader'), require.resolve('sass-loader')],
        })
      },
      {
        exclude: [/\.js$/, /\.html$/, /\.json$/],
        loader: require.resolve('file-loader'),
        options: {
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },

希望这对将来有帮助。
你救了我的命。这是我在概念上的错误。我读了这些文件，终于完全明白了。谢谢你的精彩回复！变化：