css - 无法解析 'css-loader' - Webpack 入门错误

Question

完全按照 webpack 网站上的入门指南，我在构建时遇到了这个错误:

ERROR in ./src/index.js Module not found: Error: Can't resolve 'css-loader' in 'C:\Users\Dominik\Desktop\tutorial' @ ./src/index.js 2:0-21 webpack.config.js

css-loader 安装在本地。它在 package.json 中注册。我做错了什么？

    const path = require("path");

    module.exports = {
      entry: "./src/index.js",
      output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist")
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
          }
        ]
      }
    };

package.json

    {
      "name": "tutorial",
      "version": "1.0.0",
      "description": "",
      "private": true,
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "css-loader": "^3.4.0",
        "style-loader": "^1.1.1",
        "webpack": "^4.41.4",
        "webpack-cli": "^3.3.10"
      },
      "dependencies": {
        "lodash": "^4.17.15"
      }
    }

index.js

    import _ from "lodash";
    import "./style.css";

    function component() {
      const element = document.createElement("div");

      element.innerHTML = _.join(["Hello", "webpack"], " ");
      element.classList.add("hello");

      return element;
    }

    document.body.appendChild(component());

样式.css

    .hello {
      color: red;
    }

Answer 1

尝试重新运行 npm install --save-dev css-loader。你能在你的 node_modules 文件夹中看到它吗？

编辑

卸载并重新安装模块修复它:

npm remove css-loader && npm install --save-dev css-loader