ERROR in style.css Module parse failed: Unexpected token (2:20) You may need an appropriate loader

Question

I am trying to extract and load a css in webpack, but I get the following error:

"ERROR in ./src/css/style.css 2:20 Module parse failed: Unexpected token (2:20) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. "

My webpack file is:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // entrada (las dependencias) que se van a juntar en la salida u output
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, 'dist'),
    filename: "[name].js"
  },
  // lista de plugins
  plugins: [
    // plugin para incluir los outputs dentro de las páginas HTML, podemos listar en las que queremos que aparezcan
    new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "index.html"
  }),
  // plugin para extraer el css de las entradas u entry y unirlo o minificarlo en un solo output
  new MiniCSSExtractPlugin({
      filename: "./css/style.css",
  })
  ],
// cargadores, los que transpilan tal formato en otro aceptable por los navegadores
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }

    ]
  },
  module: {
      rules: [
        {
          test: /\.css$/,
          loader: [
            MiniCSSExtractPlugin.loader,
            "css-loader"
          ]
        }
      ]
    },
    module: {
        rules: [
          {
            test: /\.(png|jpg)$/,
            loader: 'url-loader'
            }
            ]
          },
// los paquetes npm que no queremos compilar en nuestro output

};

Code css: https://codepen.io/negocios201x/pen/eYORJpy I need your help. Thank you.

Error: > header .main-header { | padding: 30px 150px; | position: absolute; @ ./src/index.js 1:0-35 — Miguel Urbina Rodríguez

Łukasz Nojek Łukasz Nojek · Accepted Answer · 2019-08-28T21:10:05

Try use instead of loader:

module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            MiniCSSExtractPlugin.loader,
            "css-loader"
          ]
        }
      ]
    },

Besides, you don't need to repeat module: { and } for every rule - they all can be gathered together.

ERROR in style.css Module parse failed: Unexpected token (2:20) You may need an appropriate loader

1 Answers