网络包 3 : Use sass-loader and ExtractTextPlugin doesn't work

Question

我一直在尝试在 webpack 中使用 sass-loader，并且按照以下说明进行操作 -> https://github.com/webpack-contrib/extract-text-webpack-plugin#extracting-sass-or-less但这不起作用。

有人可以帮助我吗？

存储库

https://github.com/gpincheiraa/boolean-html-js-exercises/tree/dev

错误

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

├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1d2d1d6df9ed0dfdaf3859d81859d83" rel="noreferrer noopener nofollow">[email protected]</a>
├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1838083848dcc8d8e80858493a1d6cfd0cfd3" rel="noreferrer noopener nofollow">[email protected]</a>
├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593b383b3c357429352c3e3037742d2b38372a3f362b34743a35382a2a74292b36293c2b2d303c2a196f776b6d7768" rel="noreferrer noopener nofollow">[email protected]</a>
├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05676467606928756a697c636c696945332b37332b35" rel="noreferrer noopener nofollow">[email protected]</a>
├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727172757c3d6062756375643d75632220212550263e22243e21" rel="noreferrer noopener nofollow">[email protected]</a>
├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0f0c0f0801401d1f081e0819401e190c0a08405e2d5b435f59435c" rel="noreferrer noopener nofollow">[email protected]</a>
├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fecfcfca2e3e0eeebeafdcfbfa1bdb7a1b8" rel="noreferrer noopener nofollow">[email protected]</a>
├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efbe6eaecfffdeab3eafbe6eab3e9fbfceefffdf5b3eef2ebf9f7f0deadb0aeb0ae" rel="noreferrer noopener nofollow">[email protected]</a>
├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4129352c2d6c2d2e2025243301716f746f70" rel="noreferrer noopener nofollow">[email protected]</a>
├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe968a9392d3899b9c8e9f9d95d38e928b999790beccd0cdced0cf" rel="noreferrer noopener nofollow">[email protected]</a>
├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e9e5f6efe0ebf3eaa9e8ebe5e0e1f6c4b6aab4aab5" rel="noreferrer noopener nofollow">[email protected]</a>
├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f59b9a9190d886948686b5c1dbc0dbc6" rel="noreferrer noopener nofollow">[email protected]</a>
├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f7e5f7f7a9e8ebe5e0e1f6c4b2aab4aab2" rel="noreferrer noopener nofollow">[email protected]</a>
├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="592a2d20353c743536383d3c2b1969776861776b" rel="noreferrer noopener nofollow">[email protected]</a>
├── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5c2d0d7c5d4d6def5869b809b83" rel="noreferrer noopener nofollow">[email protected]</a>
└── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="384f5d5a48595b53155c5d4e154b5d4a4e5d4a780a160f1609" rel="noreferrer noopener nofollow">[email protected]</a>

webpack.config.js

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
        }
    }
};

Answer 1

问题来自commented style code in your index.html 。 index.html 由 html-webpack-plugin 处理，由于某种原因，它仍然尝试处理 require 调用( line 9 和 line 11 )。原因可能是 html-webpack-plugin 的自定义 EJS 加载器。

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

通过导入 .scss 文件，您配置的规则将应用于该文件。但似乎实际的 extract-text-webpack-plugin 实例在此过程中不可用。您在这些 require 调用中使用内联加载器，但您配置的规则仍将应用于该加载器。为了防止应用其他加载器，您可以在导入时添加 ! 前缀。

来自 webpack documentation - Rule.enforce :

All normal loaders can be omitted (overridden) by prefixing ! in the request.

All normal and pre loaders can be omitted (overridden) by prefixing -! in the request.

All normal, post and pre loaders can be omitted (overridden) by prefixing !! in the request.

为了能够在 HTML 中正确使用 CSS，您还需要在 sass-loader 之后使用 css-loader，因为 EJS 在此需要 JavaScript地方，而不是裸CSS。要求将变为:

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

最好在实际应用程序中导入 index.scss 而不是 html-webpack-plugin 使用的模板。