Не удается определить путь для файла css внутри node_modules при импорте и сборке через веб-пакет

Question

Я пытаюсь включить normalize. css в свой файл компонента реагирования через импорт "~ normalize.css / normalize. css", но при попытке его создания выдается следующее сообщение об ошибке:

Модуль не найден: Ошибка: невозможно разрешить '~ normalize.css / normalize. css'

Мой пакет. Файл json выглядит следующим образом и webpack.config. Файл js также указан ниже.

{
  "name": "ccna",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "@blueprintjs/core": "^3.24.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.4.2",
    "html-loader": "^1.0.0",
    "html-webpack-plugin": "^4.0.2",
    "node-sass": "^4.13.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "blueprint-css": "^3.0.0-beta.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

Мой файл webpack.config. js выглядит следующим образом -

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

Я пытаюсь импортировать таблицу стилей в ReactJS файл компонента.

import React, { Component } from "react";
import ReactDOM from "react-dom";

import '~normalize.css/normalize.css';
import '../../css/main.scss';

import Header from "./Header";

class App extends Component {

    constructor(props){
        super(props)
    }

    render(){
        return (
            <>
                <Header/>
            </>
        )
    }

}
export default App;

Примечание: main.s css разрешается нормально, но проблема возникает, когда я пытаюсь импортировать любой файл css или s css из / node_modules / папка.