How to use normalize.css with webpack style-loader?

Question

I have a webpack project setup like so:

webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.(css|scss|sass)$/,
        use: [ "style-loader", "css-loader",{
          loader: 'fast-sass-loader',
          options: {
            includePaths: ['./node_modules/normalize.css']
          }
        }]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

and i've installed normalize.css via npm install normalize.css, but i cant get to referencing it.

when i put @import "~normalize.css"; at the top of my main.scss file, i get the following error:

ERROR in ./node_modules/css-loader!./node_modules/fast-sass-loader/lib??ref--6-2!./src/main.scss
Module build failed: Error: import file cannot be resolved: "@import "~normalize.css";" @/Users/micahsmith/dev/webpack-4-quickstart/src/main.scss
    at Object.importReplacer (/Users/micahsmith/dev/webpack-4-quickstart/node_modules/fast-sass-loader/lib/index.js:206:19)
    at importReplacer.throw (<anonymous>)
    at onRejected (/Users/micahsmith/dev/webpack-4-quickstart/node_modules/co/index.js:81:24)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./src/main.scss 2:14-130
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src

Answer 1

Go to your entry point: import 'normalize.css';

It is way easier to import here than trying to fix css-loader.