来自加载器列表的元素应该带有'sass-loader webpack'中的'loader'或'loaders'。

Question

我在我的Webpack加载器数组中有这个加载器：

{ test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin('style-loader', 'css-loader!sass-loader') }

我正在尝试使用webpack将我的SCSS编译成CSS，但是我遇到了以下错误：

/Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:60
    throw new Error("Element from loaders list should have one of the fields 'loader' or 'loaders'");
    ^

Error: Element from loaders list should have one of the fields 'loader' or 'loaders'
    at getLoadersFromObject (/Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:60:8)
    at LoadersList.<anonymous> (/Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:78:12)
    at Array.map (native)
    at LoadersList.match (/Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:70:19)
    at NormalModuleFactory.<anonymous> (/Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/lib/NormalModuleFactory.js:109:65)
    at /Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/async/lib/async.js:697:13
    at /Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/async/lib/async.js:52:16
    at done (/Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/async/lib/async.js:248:21)
    at /Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/async/lib/async.js:44:16
    at /Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/async/lib/async.js:694:17

这是我的完整 Webpack 配置：

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: [
    './app/index'
  ],

  output: {
      path: path.resolve('./public/bundles/'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
  ],

  module: {
    loaders: [
        { test: /\.css$/, exclude: /node_modules/, loader: 'style!css' },
        { test: /\.json$/, loader: 'json-loader' },
        { test: /\.jsx$/, loaders: ['react-hot', 'babel-loader'], include: path.join(__dirname, 'app') },
        { test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
        { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
        { test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin('style-loader', 'css-loader!sass-loader') }
    ]
  },
}

- Liondancer

Answer 1

Sokra提供了一个如何使用ExtractTextPlugin的示例，链接在这里：https://github.com/webpack/extract-text-webpack-plugin/blob/master/example/webpack.config.js

可以看到，您的示例与他的示例有一些不同。

• 在“plugins：[]”数组中使用ExtractTextPlugin构造函数需要使用new
• 在loaders数组中使用插件的方法是调用静态方法.extract()，而不是简单地调用插件构造函数
• “loader对象”中的引用是针对“loader:”属性，而不是像您所写的那样是“loaders:”（loaders是一个选项，但需要一个数组）

希望这能帮到您！

- James Henry

---

我没有看到extract()，我太累了。谢谢！我需要另一双眼睛！！ - Liondancer

没问题，很乐意帮忙。 - James Henry

我遇到了几个问题=[如果你想尝试解决它们，我会非常感激，谢谢！这里是链接1和链接2。 - Liondancer