3

我正在尝试在我的 React + Webpack 项目上运行 SASS 编译并继续遇到此错误：

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

遵循本教程中的指南：链接

这是我的 webpack.config.js

有什么建议么？

const debug = process.env.NODE_ENV !== "production";
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      },
      {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract('css!sass')
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new ExtractTextPlugin('dist/styles/main.css', {
        allChunks: true
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};
4

3 回答 3

5

当您NODE_ENV不是production时，您不包含任何插件。

plugins: debug ? [] : [
  new ExtractTextPlugin('dist/styles/main.css', {
    allChunks: true
  }),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],

所以什么时候debug是真的，你会有

plugins: []

但是您仍然在.scss加载程序中使用它。

为了解决这个问题，您也可以将它添加到这些插件中（这样您就没有像这样的生产插件UglifyJsPlugin）：

plugins: debug
  ? [
      new ExtractTextPlugin("dist/styles/main.css", {
        allChunks: true
      })
    ]
  : [
      new ExtractTextPlugin("dist/styles/main.css", {
        allChunks: true
      }),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false })
    ]

ExtractTextPlugin或者您不在.scss加载程序中使用（这不会将它们提取到开发中的 css 文件中）：

{
  test: /\.scss$/,
  loader: debug ? 'css!sass' : ExtractTextPlugin.extract('css!sass')
}
于 2017-02-21T13:54:58.327 回答
2

所以我通过安装 style-loader、css-loader 和 sass-loader 解决了这个问题。

npm install style-loader css-loader sass-loader --save-dev

然后我像这样使用它们。

{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract("style-loader","css-loader!sass-loader"),
 },
于 2017-02-21T13:48:42.943 回答
0

由于参数格式不正确，我发生了错误-请参阅此-> https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/207

我的代码看起来像这样 module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) }] }, plugins: [ new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true }) ]

于 2017-06-12T12:59:16.810 回答