Почему не видит модуль css в js?

Question

[Grione]

Вот такой простенький код. И почему-то не видит styles. Выдаёт ошибку

ERROR in ./src/app.jsx 2:0-34

Module not found: Error: request argument is not a string

import React from "react";

import styles from "./styles.css";

console.log(styles);

function App({ title }) {
  return (
    <h1 className={styles.title}>{title}</h1>
  )
}

export default App;

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.css$/i,
        exclude: /node_modules/,
        use: [
          'style-loader',
          {
            options: {
              modules: true,
            },
          },

        ],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  },
  devServer: {
    static: path.join(__dirname, './dist'),
    compress: true,
    port: 3000,
  },
}

Answer 1

[Евгений Фролов]

Выглядит, что вы забыли добавить css-loader

Попробуйте следующим образом:

{
    test: /\.css$/i,
    exclude: /node_modules/,
    use: [
        "style-loader",
        {
            loader: "css-loader",
            options: {
                modules: true,
            },
        },
    ],
},