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相比，将其导入此处要容易得多。

如何在Webpack样式加载器中使用normalize.css？

1 个答案: