使用 sass 加载器的错误 webpack答案

【问题标题】：Error webpack using sass loader使用 sass 加载器的错误 webpack
【发布时间】：2017-01-26 22:18:28
【问题描述】：

目前我坚持让 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)

感谢您的帮助。

【问题讨论】：

调试日志不是很有用，因为它不包含您遇到的实际错误。您可以手动启动 WDS 并将错误添加到您的问题中吗？ webpack-dev-server --progress --colors --inline
@robertklep 抱歉，我编辑了我的问题。

标签： node.js reactjs sass webpack

【解决方案1】：

您的 Webpack 配置缺少以下行：

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

见the documentation。

【讨论】：