如何将 normalize.css 与 webpack style-loader 一起使用？

Question

我有一个像这样的 webpack 项目设置：

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"
    })
  ]
};

并且我已经通过 npm install normalize.css 安装了 normalize.css，但我无法引用它。

当我将 @import "~normalize.css"; 放在 main.scss 文件的顶部时，出现以下错误：

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

转到您的入口点：import 'normalize.css';

在这里导入比尝试修复要容易得多 css-loader。

如何将 normalize.css 与 webpack style-loader 一起使用？

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

webpack

webpack-style-loader

normalize-css