错误:“提取文本Webpack插件"； loader的使用没有相应的插件， [英] Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin,

问题描述

./client/styles/main.scss中的错误 模块构建失败:错误:使用"extract-text-webpack-plugin"加载程序而没有相应的插件，请参考

ERROR in ./client/styles/main.scss Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example at Object.pitch (/Users/leongaban/projects/go/src/github.com/pizzahutdigital/mythor/node_modules/extract-text-webpack-plugin/dist/loader.js:53:11) @ ./client/index.js 25:0-29 @ multi ./client

不确定为什么会发生此错误.但是，main.scss文件正在加载，但是SASS变量名称或mixins无法正常工作.

Not sure why this error is happening. However the main.scss file is getting loaded, but SASS variable names or mixins aren't working.

主要index.js

The main index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

// Styles
import './styles/main.scss';

webpack.config.babel.js

webpack.config.babel.js

import webpack from 'webpack';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';

const dist = path.resolve(__dirname, 'dist');
const app = path.resolve(__dirname, 'client');

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: path.join(__dirname, '/client/index.html'),
  inject: 'body'
});

const PATHS = {
  app,
  build: dist
};

const LAUNCH_COMMAND = process.env.npm_lifecycle_event;

const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;

const productionPlugin = new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production')
  }
});

const base = {
  entry: [
    PATHS.app
  ],
  output: {
    path: PATHS.build,
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
          publicPath: dist
        })
      }
    ],
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
        loader: 'url-loader?limit=100000'
      }
    ]
  },
  resolve: {
    modules: ['node_modules', path.resolve(__dirname, '/client')]
  }
};

const developmentConfig = {
  devtool: 'cheap-module-inline-source-map',
  plugins: [HtmlWebpackPluginConfig]
};

const productionConfig = {
  devtool: 'cheap-module-source-map',
  plugins: [HtmlWebpackPluginConfig, productionPlugin]
};

console.log('LAUNCH_COMMAND npm run', LAUNCH_COMMAND);

export default Object.assign({}, base,
  isProduction === true ? productionConfig : developmentConfig
);

package.json

package.json

"dependencies": {
  "axios": "^0.16.2",
  "babel-runtime": "^6.23.0",
  "chalk": "^2.1.0",
  "eslint": "^4.3.0",
  "eslint-config-airbnb": "^15.1.0",
  "eslint-plugin-import": "^2.7.0",
  "eslint-plugin-jsx-a11y": "^5.1.1",
  "eslint-plugin-react": "^7.1.0",
  "firebase": "^4.3.0",
  "material-ui": "^0.19.2",
  "prop-types": "^15.5.10",
  "ramda": "^0.24.1",
  "react": "^15.6.1",
  "react-dom": "^15.6.1",
  "react-hot-loader": "^1.3.1",
  "react-redux": "^5.0.5",
  "react-router": "^4.1.2",
  "react-router-dom": "^4.1.2",
  "redux": "^3.7.2",
  "redux-thunk": "^2.2.0",
  "scss-lint": "^0.0.0"
},
"devDependencies": {
  "babel-core": "^6.25.0",
  "babel-loader": "^7.1.1",
  "babel-plugin-transform-async-to-generator": "^6.24.1",
  "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-polyfill": "^6.23.0",
  "babel-preset-env": "^1.6.0",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "babel-preset-react-hmre": "^1.1.1",
  "babel-preset-stage-0": "^6.24.1",
  "copy-webpack-plugin": "^4.0.1",
  "css-loader": "^0.28.4",
  "enzyme": "^2.9.1",
  "enzyme-to-json": "^1.5.1",
  "extract-text-webpack-plugin": "^3.0.0",
  "html-webpack-plugin": "^2.29.0",
  "jest": "^20.0.4",
  "node-sass": "^4.5.3",
  "react-test-renderer": "^15.6.1",
  "redux-mock-store": "^1.2.3",
  "sass-loader": "^6.0.6",
  "style-loader": "^0.18.2",
  "url-loader": "^0.5.9",
  "webpack": "^3.3.0",
  "webpack-dev-server": "^2.5.1"
}

推荐答案

在您的webpack配置插件数组中，也像这样添加ExtractTextPlugin

In your webpack config plugins array, add ExtractTextPlugin too like this

const developmentConfig = {
  devtool: 'cheap-module-inline-source-map',
  plugins: [HtmlWebpackPluginConfig, new ExtractTextPlugin("main.css")]
};

const productionConfig = {
  devtool: 'cheap-module-source-map',
  plugins: [HtmlWebpackPluginConfig, new ExtractTextPlugin("main.css"), productionPlugin]
};

它将创建一个单独的main.css文件，其中将包含您的所有CSS样式.

It will create a separate main.css file which will contain all your css styles.

这篇关于错误:“提取文本Webpack插件"； loader的使用没有相应的插件，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！