[英]Webpack not recognizing CSS files even with the appropriate loaders installed
即使安装了适当的加载器,webpack 似乎也无法识别我的 CSS 文件...
webpack.config.js :
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = env => {
let devType = env.production || false;
console.log(devType);
return {
mode: devType ? "production" : "development",
entry: "./src/js/app.js",
output: {
filename: "js/app.bundle.js",
path: path.resolve(__dirname, "docs"),
assetModuleFilename: "imgs/[name][ext]",
clean: true
},
devServer: {
static: {
directory: path.resolve(__dirname, "./docs")
},
port: 5001
},
module: {
rules: [{
test: /\.html/g,
use: ["html-loader"]
},
{
test: /\.(svg|ico|webp|png|jpg|jpeg|gif)$/,
type: "asset/resource"
},
{
test: /\.css/g,
use: [
devType ? MiniCssExtractPlugin.loader : "style-loader",
{
loader: "css-loader"
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: path.resolve(__dirname, "./src/index.html")
}),
new MiniCssExtractPlugin({
filename: "css/main.css"
})
]
};
};
package.json :
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:dev": "webpack --watch",
"build:prod": "webpack --watch --env production",
"start:dev": "webpack serve --open",
"start:prod": "webpack serve --open --env production"
},
"keywords": [],
"author": "bunee",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.5.1",
"html-loader": "^3.0.1",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.4.5",
"style-loader": "^3.3.1",
"webpack": "^5.64.2",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.5.0"
}
}
应用程序.js :
import "../css/normalize.css";
import "../css/app.css";
console.log("bunee");
我必须再提一件事,如果在app.js中只导入一个 CSS 文件,一切都会正常工作。 仅当我尝试导入多个 CSS 文件时才会出现此问题。
如果我没有说清楚,请随时问我问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.