Busqué en todas partes y durante días y todavía no puedo entender por qué mi último intento tampoco funciona.
¿Por qué no hay un archivo CSS en la carpeta dist?
Ahora estoy importando los estilos en un archivo .js que luego se importa en el punto de entrada de mi aplicación y todavía nada.
webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HTMLWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); const paths = { src: path.resolve(__dirname, 'src'), dist: path.resolve(__dirname, 'dist'), }; module.exports = { entry: 'index.js', mode: 'production', cache: false, output: { path: paths.dist, filename: 'index.js', }, module: { rules: [ { test: /\.s[ac]ss$/i, use: [ 'style-loader', { loader: 'css-loader', options: { sourceMap: true, }, }, { loader: 'sass-loader', options: { sourceMap: true, }, }, ], }, { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource', generator: { filename: 'assets/[name][ext][query]', }, }, { test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, type: 'asset/resource', generator: { filename: 'assets/fonts/[name][ext][query]', }, }, ], }, plugins: [ new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: '[name][contenthash].css', chunkFilename: '[id].css', ignoreOrder: false, }), new CopyWebpackPlugin({ patterns: [ { from: paths.src + '/assets', to: paths.dist + '/assets', toType: 'dir', globOptions: { ignore: ['*.DS_Store', 'Thumbs.db'], }, }, { from: paths.src + '/mocks', to: paths.dist + '/mocks', toType: 'dir', globOptions: { ignore: ['*.DS_Store', 'Thumbs.db'], }, } /*{ from: paths.src + '/styles.css', to: paths.dist + '/styles.css', }*/, ], }), new HTMLWebpackPlugin({ filename: 'index.html', template: paths.src + '/index.html', favicon: paths.src + '/favicon.ico', }), ], performance: { hints: false, maxEntrypointSize: 512000, maxAssetSize: 512000, }, resolve: { modules: [paths.src, 'node_modules'], extensions: ['.js', '.jsx', '.json'], }, };src/importCSSForBuild.js
import './styles.scss'src/index.js
import './js/ConsoleLog.js'; import './importCSSForBuild.js' [... other stuff]paquete.json
.... "sideEffects": [ "**/*.css", "src/importCSSForBuild.js" ], "scripts": { "postinstall": "npm run start", "start": "npm-run-all --parallel css serve", "build": "cross-env NODE_ENV=production webpack --config webpack.config.js", "buildserve": "cross-env NODE_ENV=production webpack --config webpack.config.js && http-server ./dist -c-1 -p 8081", "test": "jest --no-cache ./src/*", "watch": "jest --no-cache --watch ./*", "coverage": "jest --coverage" }, "devDependencies": { "@babel/core": "^7.16.12", "@babel/plugin-proposal-class-properties": "^7.16.7", "@babel/preset-env": "^7.16.11", "babel-jest": "^27.4.6", "babel-loader": "^8.2.3", "babel-preset-jest": "^27.4.0", "clean-webpack-plugin": "^4.0.0", "compression-webpack-plugin": "^9.2.0", "copy-webpack-plugin": "^10.2.2", "cross-env": "^7.0.3", "css-loader": "^6.6.0", "css-minimizer-webpack-plugin": "^3.4.1", "dead-server": "1.0.6", "html-webpack-plugin": "^5.5.0", "http-server": "^14.1.0", "jest": "^27.4.7", "mini-css-extract-plugin": "^2.5.3", "node-sass": "^7.0.1", "npm-run-all": "^4.1.5", "postcss-loader": "^6.2.1", "postcss-preset-env": "^7.2.3", "prettier": "^2.5.1", "resolve-url-loader": "^5.0.0", "sass": "^1.49.0", "sass-loader": "^12.4.0", "style-loader": "^3.3.1", "webpack": "^5.67.0", "webpack-cli": "^4.9.2", "webpack-dashboard": "^3.3.7", "webpack-dev-server": "^4.7.3" }, "engines": { "node": ">=14.15.0" } }Veo que esta configuración de paquete web es para ejecutar el paquete web en modo de producción y desea emitir el css en otro archivo separado del javascript para que el navegador no tenga que volver a cargar la aplicación completa (incluidos css y js) si hay un cambio solo en archivos js (fallos de carga).
mini-css-extract-plugin , extrae el css a un archivo separado y ese archivo css está vinculado a su archivo html definido en la propiedad de plantilla de HTMLWebpackPlugin .
En la documentación oficial de MiniCSSExtractPlugin , se menciona que necesitamos MiniCSSExtractPlugin.loader para extraer css en archivo(s) junto con css loader.
En su configuración, usó style-loader , por lo que debemos cambiarlo a MiniCSSExtractPlugin.loader .
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const HTMLWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [ new MiniCssExtractPlugin({ filename: "[name][contenthash].css", chunkFilename: "[id].css", ignoreOrder: false, }), , new HTMLWebpackPlugin({ filename: "index.html", template: paths.src + "/index.html", // css will be linked in this file favicon: paths.src + "/favicon.ico", }), ], module: { rules: [ { test: /\.s[ac]ss$/i, use: [ MiniCssExtractPlugin.loader, // extract css into files "css-loader", // convert css to js string css "sass-loader", // convert sass to css ], }, ], }, }; El style-loader se usa principalmente para agregar/inyectar css en el dom usando la etiqueta de estilo, mientras que MiniCSSExtractPlugin.loader se usa para extraer css en un archivo y agregar la etiqueta de enlace para el mismo archivo css en el archivo html de plantilla especificado en HTMLWebpackPlugin.