Как правильно загрузить CSS из внешнего модуля в React?

Question

В моем приложении activ.js я пытаюсь использовать внешний модуль (React Toastify) , используя следующее выражение:

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

К сожалению, это приводит к следующей ошибке:

Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .Toastify__toast-container {
|   z-index: 9999;

Полагаю, это как-то связано с веб-пакетом. Вот мои настройки в webpack.config.js:

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

devtool: production ? '' : 'source-map',

resolve: {
  extensions: [".js", ".jsx", ".json"],
},


module: {
  rules: [
    {
     test: /\.jsx?$/,


      exclude: /node_modules/,



      loader: 'babel-loader',
    },
  ],
},

};

Я не уверен, какэто можно исправить, любой совет приветствуется.

Answer 1

В вашем конфигурационном файле веб-пакета вы добавили тест загрузчика css:

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
    }, {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },
  ],
},

И не забудьте установить его с npm i -D css-loader.

Более подробная информация здесь: https://github.com/webpack-contrib/css-loader