Webpack и. css

Question

mm2:OptionsAPI ivan$ npm -v
6.13.4

При включении файла .css,

import BaseTable, { Column } from 'react-base-table'
import 'react-base-table/styles.css'

я получаю сообщение об ошибке, подобное этому:

ERROR in ./node_modules/react-base-table/styles.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .BaseTable {
|   box-shadow: 0 2px 4px 0 #eeeeee;
|   background-color: #ffffff;
 @ ./wwwroot/source/optionsList.jsx 14:0-38
 @ ./wwwroot/source/app.js

My webpack.config.js выглядит так:

more webpack.config.js 
const path = require('path');
module.exports = {
  entry: { 'main': './wwwroot/source/app.js' },
  output: {
    path: path.resolve(__dirname, 'wwwroot/dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      { test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }
      }
    ]
  }
};

Я что-то упустил в webpack для разбора .css?

РЕДАКТИРОВАТЬ 1

Согласно Рекомендация в комментариях, я изменил файл webpack.config.js для этого:

const path = require('path');
module.exports = {
  entry: { 'main': './wwwroot/source/app.js' },
  output: {
    path: path.resolve(__dirname, 'wwwroot/dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
        {
          test: /\.css$/,
          use: [
              {
                  loader: "style-loader"
              },
              {
                  loader: "css-loader",
                  options: {
                      modules: false,
                      importLoaders: 2,
                      sourceMap: true,
                      minimize: true
                  }
              }
          ]
      },
      { test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }
      }
    ]
  }
};

Я получаю другую ошибку:

ERROR in ./wwwroot/source/optionsList.jsx
Module not found: Error: Can't resolve 'style-loader' in '/Users/ivan/Documents/Projects/OptionsAPI'
 @ ./wwwroot/source/optionsList.jsx 14:0-38
 @ ./wwwroot/source/app.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! moviesapi@1.0.0 wbp: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the moviesapi@1.0.0 wbp 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!     /Users/ivan/.npm/_logs/2020-01-06T18_31_42_598Z-debug.log

РЕДАКТИРОВАТЬ 2

После установки загрузчиков с npm install style-loader css-loader --save-dev новая ошибка:

npm run wbp

ERROR in ./node_modules/css-loader/dist/cjs.js?{"modules":false,"importLoaders":2,"sourceMap":true,"minimize":true}!./node_modules/react-base-table/styles.css
Module build failed: ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'minimize'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }
    at validate (/Users/ivanfigueredo/Documents/Projects/OptionsAPI/node_modules/schema-utils/dist/validate.js:85:11)
    at Object.loader (/Users/ivanfigueredo/Documents/Projects/OptionsAPI/node_modules/css-loader/dist/index.js:34:28)
 @ ./node_modules/react-base-table/styles.css 2:26-87
 @ ./wwwroot/source/optionsList.jsx
 @ ./wwwroot/source/app.js

Answer 1

Добавьте это к вашему rules и запустите npm install style-loader css-loader --save-dev.

{
    test: /\.css$/,
    use: [
        {
            loader: "style-loader"
        },
        {
            loader: "css-loader",
            options: {
                modules: false,
                importLoaders: 2,
                sourceMap: true
            }
        }
    ]
}

Answer 2

Попробуйте импортировать './react-base-table/styles.css' или импортировать './styles.css'

Если это не помогло, попробуйте встроенный стиль для отладки