Webpack выдает ошибку при сборке css

введите сюда описание изображенияНе могу понять почему выдается ошибка.


ERROR in ./src/css/index.css 1:5

Module parse failed: Unexpected token (1:5)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

body { background-color: #000; }

@ ./src/index.js 2:0-24

npm ERR! code ELIFECYCLE

npm ERR! errno 2

npm ERR! [email protected] build: webpack --mode production

npm ERR! Exit status 2

npm ERR!

npm ERR! Failed at the [email protected] build script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR! C:\Users\Dmitriy\AppData\Roaming\npm-cache_logs\2020-06-09T14_15_12_135Z-debug.log


В комментариях написаны файлы к которых лежит код. Вот codepen если кому удобно там https://codepen.io/DmitriyKurtsev/pen/GRopery

// index.js
import './js/common'
import './css/index.css'
//---------------------

// package.json
"scripts": {
  "dev": "webpack-dev-server --open --mode development",
  "build": "webpack --mode production"
},
"browserslist": [
  "> 1%",
  "last 3 version"
],
//---------------------

// src/js/webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin-path');

module.exports = {
  entry: {
    app: './src/index.js'
  },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist'
  },

  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: '/node_modules/'
    },
    {
      test: /\.css$/i,
      use: [
        'style-loader',
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: { sourceMap: true }
        },
        {
          loader: 'postcss-loader',
          options: { sourceMap: true, config: 'src/js/postcss.config.js' }
        }
      ]
    }]
  },

  devServer: {
    overlay: true
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
}
//---------------------

// .babelrc
{
  "presets": [
    "@babel/preset-env"
  ]
}
//---------------------

// src/js/postcss.config.js
module.exports = {
  plugins:[
    require('autoprefixer'),
    require('css-mqpacker'),
    require('cssnano')({
      preset: [
        'default', {
          discardComments: {
            removeAll: true
          }
        }
      ]
    })
  ]
}

Ответы (1 шт):

Автор решения: Дастин Гольцов

Не правильно используете концепцию loaders. https://webpack.js.org/loaders/

→ Ссылка