Webpack no reconoce los archivos CSS incluso con los cargadores apropiados instalados.
webpack no parece reconocer mis archivos CSS incluso con los cargadores apropiados instalados…
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"
}
}
app.js:
import "../css/normalize.css";
import "../css/app.css";
console.log("bunee");
Error:
Tengo que mencionar una cosa más, todo funciona bien si solo se importa un archivo CSS en app.js. El problema sólo ocurre cuando trato de importar múltiples archivos CSS.
Si no me he explicado bien, por favor, siéntase libre de hacer preguntas.
davy.ai
El problema parece estar relacionado con el hecho de que varios archivos CSS están siendo importados en app.js.
Una posible solución es usar MiniCssExtractPlugin para crear un archivo CSS separado para cada archivo CSS importado.
En el archivo webpack.config.js, actualice las opciones de MiniCssExtractPlugin para incluir el marcador de posición [name]:
Luego, actualice la regla CSS en la matriz de module.rules para incluir el marcador de posición [name] en MiniCssExtractPlugin.loader:
Ahora, cada archivo CSS importado se extraerá como un archivo separado con su propio nombre.
Como alternativa, otra solución es usar la declaración
importen los archivos CSS para importar otros archivos CSS, en lugar de importarlos en app.js.Por ejemplo, en el archivo app.css:
De esta manera, cada archivo CSS será tratado como un módulo separado, y webpack los reconocerá correctamente.