无法解析 'css-loader' - Webpack 入门错误
Can't resolve 'css-loader' - Webpack Getting Started Error
完全按照 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());
style.css
.hello {
color: red;
}
尝试重新运行 npm install --save-dev css-loader
。你能在你的 node_modules
文件夹中看到它吗?
编辑
卸载并重新安装模块修复了它:
npm remove css-loader && npm install --save-dev css-loader
完全按照 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());
style.css
.hello {
color: red;
}
尝试重新运行 npm install --save-dev css-loader
。你能在你的 node_modules
文件夹中看到它吗?
编辑
卸载并重新安装模块修复了它:
npm remove css-loader && npm install --save-dev css-loader