⬇ Instalación de dependencias
#NPM
npm install -D mini-css-extract-plugin css-loader style-loader sass sass-loader
# YARN
yarn add -D mini-css-extract-plugin css-loader style-loader sass sass-loader
Introducción a Webpack
¿Qué es Webpack?
Conceptos básicos de Webpack
Proyecto inicial
Tu primer build con Webpack
Instalación de Webpack y construcción del proyecto
Configuración de webpack.config.js
Loaders y Plugins en Webpack
Babel Loader para JavaScript
HTML en Webpack
Loaders para CSS y preprocesadores de CSS
Copia de archivos con Webpack
Loaders de imágenes
Loaders de fuentes
Optimización: hashes, compresión y minificación de archivos
Webpack Alias
Deploy del proyecto
Variables de entorno
Webpack en modo desarrollo
Webpack en modo producción
Webpack Watch
Deploy a Netlify
Herramientas de desarrollo complementarias
Webpack Dev Server
Webpack Bundle Analyzer
Webpack DevTools
Integración básica de React.js
Instalación y configuración de React
Configuración de Webpack 5 para React.js
Configuración de plugins y loaders para React
Configuración de Webpack para CSS en React
Optimización de Webpack para React
Deploy del proyecto con React.js
Próximos pasos
Continúa con el Curso Práctico de Webpack
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Configuración de Webpack para CSS en React
25/28Recursos
Aportes 25
Preguntas 15
Ordenar por:
No se si alguién ha tenido el problema, pero la expresión regular toma o scss o sass pero nunca css:
Si se pasa de:
/\.s[ac]ss/
a
/\.s?[ac]ss/
También se cargarán archivos .css, tuve ese error en un proyecto personal.
Saludos!
mini-css-extract-plugin tambien tiene un laoder incorporado y a mi parecer es mejor usarlo para reducir el número de dependencias en el proyecto.
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
es importante que pongan primero el css loader y después el sass loader porque si no les dará error :V(me pasó)
Al hacer npm run start y ver la pagina , note que no cargaba el color de fondo definido en scss,
mire el trabajo del portfolio y vi que en el webpack.config.js
haciamos asi en la seccion de rules:
use: [
MiniCssExtractPlugin.loader , ‘css-loader’, ‘sass-loader’
]
en lugar de solo:
use: [
‘css-loader’, ‘sass-loader’
]
y funciono, se aplican los estilos.
al compilar npm run start, me mostraba el siguiente error:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
lo solucione solo quitando el style-loader del webpack.config y quedo asi
{
test: /\.s[ac]ss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
// "style-loader",
]
}
Si usan style-loader los estilos van a estar en el <head> del index.html de la salida( carpeta dist ) pero todos dentro de una etiqueta <script> y todos sabemos que no siempre es lo mejor.
Yo prefiero usar MiniCssExtractPlugin.loader en lugar de style-loader. Me ahorro una instalación, menos peso para mi bundle y voy a tener los estilos en una etiqueta <link> a la salida, haciendo referencia a un archivo CSS separado al html. Mejores prácticas 😃
sería bueno que actualizaran el curso, he tenido bastantes problemas con la sección de react al tratar de realizar algunas configuraciones
$base-color: #c6538c;
$color: rgba(black, 0.88);
body {
background-color: $base-color;
color: $color;
}
He notado que al usar el style-loader, al momento de ver el código fuente no crea ningún archivo main.css sino que coloca los estilos embebidos en una etiqueta style dentro del html, si queremos que si nos genere nuestro archivo debemos cambiar:
use: [
'style-loader',
'css-loader',
'sass-loader',
]
Por:
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
]
Y asi ya genera el archivo .css
Configuración de Webpack para CSS en React
Instalación de dependencias
#NPM
npm i mini-css-extract-plugin css-loader style-loader sass sass-loader -D
global.scss
$base-color: #c6538c;
$color: rgba(black, 0.88);
body{
background-color: $base-color;
color: $color;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import "./styles/global.scss";
ReactDOM.render(<App />, document.getElementById('app'));
Webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
},
{
test: /\.s?[ac]ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css'
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3006,
open: true
},
}
Ahora ya se porque create-react-app tarda tanto, son como 729 dependencias que debe instalar por debajo para funcionar
Algo que el profesor no explicó
El orden de los loaders para una misma regla importan, porque se ejecutan de forma secuencial; desde el último del array, hasta el primero del array.
.
Por esto a muchos les ha dado error al no tener el mismo orden que el profesor
El orden que necesitamos para usar estilos de esta forma es:
- Procesar el codigo SASS a CSS (sass-loader).
- Hacer que el codigo CSS pueda ser interpretado e importado por JavaScript (css-loader).
- Inyecta ese CSS de JavaScript al DOM (style-loader).
use: [
"style-loader", //3.
"css-loader", //2.
"sass-loader", //1."
]
Aqui hay un articulo sobre la diferencia entre dependencies y devDependencies:
https://medium.com/@dylanavery720/npmmmm-1-dev-dependencies-dependencies-8931c2583b0c
Algo importante que destacar.
.
cuando hacemos uso de style-loader , los estilos se crearan de forma inline, en mi caso generados desde del JS.
Si quieren que se genere su archivo .css, deben utilizar el loader de mini-css-extract-plugin.
Su regla quedaría así:
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
hola, me arrojaba un error en las configuraciones de los loaders y en la pagina de webpack estaba esta actualizacion la cual sirvio a la perfeccion en mi caso.
{
test: /\.s[ac]ss$/i,
use: [
// [style-loader](/loaders/style-loader)
{ loader: 'style-loader' },
// [css-loader](/loaders/css-loader)
{
loader: 'css-loader',
options: {
modules: true
}
},
// [sass-loader](/loaders/sass-loader)
{ loader: 'sass-loader' },
]}
Al ejecutar npm run start me salia el error: SassError: expected “{”, lo resolví cambiando el orden de los ‘loader’ :
Antes
{
test: /\.s[ac]ss$/,
use: [
'css-loader',
'sass-loader',
'style-loader'
]
}
Después:
{
test: /\.s[ac]ss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
Referencia: https://github.com/webpack-contrib/sass-loader/issues/867#issuecomment-854909888
No sé si alguien más lo comento con anterioridad, pero en mi caso me estaba dando el siguiente error al ejecutar el comando: npm run start
[webpack-cli] TypeError: MiniCssExtractPlugin is not a constructor
Para solucionar este error, se debe agregar lo siguiente cuando se define la constante ‘MiniCssExtractPlugin’, en nuestro archivo de webpack.config.
const MiniCssExtractPlugin = require('mini-css-extract-plugin').default;
Con esta modificación, es posible ejecutar el script de start.
Al parecer este es un issue que está en resolución para dicho plugin, en el cual presenta un error en el constructor por lo que entendí.
Agreguemos CSS para este proyecto react, con las dependencias:
npm install mini-css-extract-plugin css-loader style-loader- sass sass-loader -D
Ahora vamos con la configuracion, agregamos la regla:
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
Agregamos el plugin:
new MiniCssExtractPlugin({
filename: '[name].css'
})
e importamos en nuestro index.js
import './styles/global.scss';
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 8080
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: {
loader: 'html-loader'
}
},
{
test: /\.s[ac]ss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/public/index.html',
filename: 'index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css'
})
]
}```
Es mucho más fácil este test de SCSS/CSS:
{
test: /\.s?css$/
}
Puede o no puede haber “s” al principio
¿Alguien con estas vulnerabilidades al instalar los packages iniciales?
got <11.8.5
Severity: moderate
Got allows a redirect to a UNIX socket - https://github.com/advisories/GHSA-pfrx-2q88-qq97
No fix available
node_modules/bin-wrapper/node_modules/got
node_modules/got
download >=4.0.0
Depends on vulnerable versions of got
node_modules/bin-wrapper/node_modules/download
node_modules/download
bin-build >=2.1.2
Depends on vulnerable versions of download
node_modules/bin-build
cwebp-bin >=3.0.0
Depends on vulnerable versions of bin-build
Depends on vulnerable versions of bin-wrapper
node_modules/cwebp-bin
imagemin-webp >=4.1.0
Depends on vulnerable versions of cwebp-bin
node_modules/imagemin-webp
image-webpack-loader 3.5.0 || >=4.0.0
Depends on vulnerable versions of imagemin-gifsicle
Depends on vulnerable versions of imagemin-mozjpeg
Depends on vulnerable versions of imagemin-optipng
Depends on vulnerable versions of imagemin-pngquant
Depends on vulnerable versions of imagemin-webp
node_modules/image-webpack-loader
styles-loader *
Depends on vulnerable versions of image-webpack-loader
node_modules/styles-loader
gifsicle >=3.0.0
Depends on vulnerable versions of bin-build
Depends on vulnerable versions of bin-wrapper
node_modules/gifsicle
imagemin-gifsicle >=6.0.0
Depends on vulnerable versions of gifsicle
node_modules/imagemin-gifsicle
mozjpeg >=4.0.0
Depends on vulnerable versions of bin-build
Depends on vulnerable versions of bin-wrapper
node_modules/mozjpeg
imagemin-mozjpeg >=7.0.0
Depends on vulnerable versions of mozjpeg
node_modules/imagemin-mozjpeg
optipng-bin >=3.0.0
Depends on vulnerable versions of bin-build
Depends on vulnerable versions of bin-wrapper
node_modules/optipng-bin
imagemin-optipng >=6.0.0
Depends on vulnerable versions of optipng-bin
node_modules/imagemin-optipng
pngquant-bin >=3.0.0
Depends on vulnerable versions of bin-build
Depends on vulnerable versions of bin-wrapper
node_modules/pngquant-bin
imagemin-pngquant >=5.1.0
Depends on vulnerable versions of pngquant-bin
node_modules/imagemin-pngquant
bin-wrapper >=0.4.0
Depends on vulnerable versions of bin-version-check
Depends on vulnerable versions of download
node_modules/bin-wrapper
semver-regex <=3.1.3
Severity: high
Regular Expression Denial of Service (ReDOS) - https://github.com/advisories/GHSA-44c6-4v22-4mhx
Regular expression denial of service in semver-regex - https://github.com/advisories/GHSA-4x5v-gmq8-25ch
No fix available
node_modules/semver-regex
find-versions <=3.2.0
Depends on vulnerable versions of semver-regex
node_modules/find-versions
bin-version <=4.0.0
Depends on vulnerable versions of find-versions
node_modules/bin-version
bin-version-check <=4.0.0
Depends on vulnerable versions of bin-version
node_modules/bin-version-check
20 vulnerabilities (3 low, 16 moderate, 1 high)
Agregué lo siguiente en el archivo package.json y después de guardar ejecuté un npm update.
"overrides": {
"got": "^11.8.5",
"semver-regex": "^3.1.3"
}
Chicuelos si les sucede que les sale un warning cuando corren el script de start que les bloquea la pantalla del navegador porque un recurso pesa mucho, les recomiendo que ingresen estas líneas en el ’ entry ’ dentro del webpack.config:
entry:{
index: {
import: './src/index.js',
dependOn: 'shared',
},
shared: 'lodash'
} ,//added new elements to split the code in chunks and require them when needed
//y tambien
optimization: {
runtimeChunk: 'single',
}, //this will apply optimization
Tuve que comentar el
import"./styles/global.scss
):
Seguí toda la ayuda pero por alguna razón me arroja este error
Compiled with problems:X ERROR in ./src/index.js 4:0-30 Module not found: Error: Can't resolve './styles/global.scss' in '/home/edu/Workspace/webpack-class/curso-webpack-react/src'
la nueva sintaxis para react 18
Antes
import react from "react";
import reactDom from "react-dom";
import App from "./components/App";
reactDom.render(<App />, document.getElementById("root"));
Ahora
import { createRoot } from 'react-dom/client';
import App from "./components/App";
import './styles/global.scss';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?