reactjs – 提取文本插件’加载器使用没有相应的插件’ – React

发布时间：2020-12-15 09:32:16 所属栏目：百科来源：网络整理

导读：我正在尝试在我的React Webpack项目上运行SASS编译并继续遇到此错误： Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin 遵循本教程中的指导原则：Link 这是我的webpack.config.js 有什么建议？

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

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

遵循本教程中的指导原则：Link

这是我的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 }),],};

解决方法

当您的NODE_ENV未生产时,您不包含任何插件.

plugins: debug ? [] : [
  new ExtractTextPlugin('dist/styles/main.css',{
    allChunks: true
  }),

因此,当调试成立时,您将拥有

plugins: []

但是你仍然在.scss加载器中使用它.

要解决它,您也可以将它添加到这些插件中(因此您没有像UglifyJsPlugin这样的生产插件)：

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

或者你不在.scss加载器中使用ExtractTextPlugin(这不会将它们提取到开发中的css文件中)：

{
  test: /.scss$/,loader: debug ? 'css!sass' : ExtractTextPlugin.extract('css!sass')
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!