Configura un entorno

Loaders de Webpack para Preprocesadores CSS 18/45

de desarrollo…

Proyecto: análisis y
14
Curso
retos Profesional
de Platzi Conf… de React Hooks FLUJO DE DESARR…

Instalación de Webpack
15
y Babel: presets, plugi…
Loaders de Webpack para preprocesadores CSS
Configuración de
16
¿Quieres utilizar tu preprocesador favorito (como Sass, Less o Stylus) para crear los
Webpack 5 y webpack…
estilos en tus aplicaciones con React.js? En esta lectura aprenderás cómo
Configuración de
implementarlos
17 dentro de tu proyecto con Webpack.
Webpack 5 con loader…

Loaders de Webpack
Configuración
18 de tu proyecto con Sass
para Preprocesadores…

Flujo de desarrollo
Primero
19 debemos
seguro de instalar las dependencias necesarias para darle soporte a Sass
y consistente…
dentro de nuestro proyecto:
20 Git Hooks con Husky

Estructura y creación
npm install --save-dev sass-loader node-sass

de componentes para…

Arquitectura de vistas y
21
componentes con…

Una vez agregadas

Maquetación las dependencias necesarias, debemos agregar una nueva regla a la
y estilos
22
configuración
del home de Webpack en la parte de rules:

Maquetación y estilos
23
de la lista de productos
{

Maquetación y estilos
24 test: /\.scss$/,

del formulario de…

loader: [

MiniCSSExtractPlugin.loader,

Maquetación y estilos
25 'css-loader',

de la información del…
'sass-loader'

Maquetación
]
y estilos
26
}

del flujo de pago

Integración de íconos y
27
conexión con React…

Integración de React
Hooks en Platzi Conf…
Ahora puedes agregar archivos Sass a cada componente y tendrás el mismo resultado
Creando nuestro primer
28
que configurar directamente CSS en Platzi Conf Merch.
custom hook

Implementando
Configuración
29
de tu proyecto con Less
useContext en Platzi…

useContext en la página
30
Para de
darle soporte a Less dentro del proyecto debemos repetir los pasos anteriores,
checkout
pero con la configuración apropiada para utilizar Less.
useRef en la página de
31
checkout

Integrando third party

32 npm install --save-dev less less-loader

custom hooks en Plat…

Configura mapas y
pagos con PayPal y…

Pasolaaconfiguración
Agregar paso para de Less a Webpack
33
conectar tu aplicación…

Integración de pagos
34
con la API de PayPal
{

test: /\.less$/,

Completando la
35 loader: [

integración de pagos…
MiniCSSExtractPlugin.loader,

'css-loader',

Paso a paso para

36 'less-loader'

conectar tu aplicación…
]

Integración de Google
37
Maps en el mapa de…

Creando un Custom
38
Hook para Google Maps
Configuración de tu proyecto con Stylus
Estrategias de
deployment profesional
Siguiendo el ejemplo
Continuous de las configuraciones previas para Sass y Less vamos a repetir
integration
39
los pasos para agregar
y continuous soporte a Stylus.
delivery…

Compra del dominio y

40
despliega con…
npm install --save-dev stylus stylus-loader

Optimización de
aplicaciones web con…

Integración de React
41 Helmet para mejorar e…
 e et pa a ejo a e
Ahora agregamos la configuración de Stylus a Webpack:
Análisis de
42
performance con…

Convierte tu aplicación
43 {

de React en PWA
test: /\.styl$/,

loader: [

Bonus: trabaja con

MiniCSSExtractPlugin.loader,

Strapi CMS para crear…

'css-loader',

Crea
'stylus-loader'

una API con Strapi

44 CMS
]
y consúmela con…
}

¿Qué sigue en tu
carrera profesional?

Próximos pasos para

45
especializarte que
La configuración en… elijas te ayudará a utilizar un preprocesador en tu proyecto y con
esto utilizar todas las ventajas que te brinda el uso de un preprocesador de CSS. Si no
conocías los preprocesadores, también puedes tomar el Curso de Preprocesadores
CSS para que comiences a utilizarlos en tus proyectos.

Te veo en la próxima clase donde aprenderás a configurar tu proyecto para un flujo de

desarrollo seguro y consistente con herramientas como ESLint y Prettier.