使用sass加载器时出现错误: webpack

Question

目前，我坚持让Sass在我的React项目中工作。在我遵循的指南中，一切都运行得很好，但是当我需要在我的webpack.config.js中使用ExtractTextPlugin时，它会抛出一个错误。我的主sass文件位于root/style.main.scss中，包含在我的index.js中，它在DOM中呈现我的应用程序，如下所示：import style from '../style/main.scss';

webpack.config.js：

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: [
            'es2015',
            'react'
          ]
        }
      },
      { test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" },
      { test: /\.useable\.css$/, loader: "style/useable!css" },
      // sass
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css!sass')
      }
    ]
  },
  plugins: [
        new ExtractTextPlugin('public/style.css', {
            allChunks: true
        })
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    proxy: {
      '/api/*': {
        target: 'http://mab-cmdb.dev',
        secure: false,
        changeOrigin: true
      }
    }
  },
};

编辑: webpack错误

/Users/jordykoppen/git/mab-cmdb-v2-frontend/webpack.config.js:25
        loader: ExtractTextPlugin.extract('css!sass')
                ^

ReferenceError: ExtractTextPlugin is not defined
    at Object.<anonymous> (/Users/jordykoppen/git/mab-cmdb-v2-frontend/webpack.config.js:25:17)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at module.exports (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack/bin/convert-argv.js:80:13)
    at Object.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js:62:48)
    at Module._compile (module.js:409:26)

谢谢你的帮助。

Answer 1

您的Webpack配置缺少以下行：

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

参见the documentation。