Loaders de Webpack para preprocesadores CSS
驴Quieres utilizar tu preprocesador favorito (como Sass, Less o Stylus) para crear los estilos en tus aplicaciones con React.js? En esta lectura aprender谩s c贸mo implementarlos dentro de tu proyecto con Webpack.
Configuraci贸n de tu proyecto con Sass
Primero debemos de instalar las dependencias necesarias para darle soporte a Sass dentro de nuestro proyecto:
npm install --save-dev sass-loader node-sass
Una vez agregadas las dependencias necesarias, debemos agregar una nueva regla a la configuraci贸n de Webpack en la parte de rules
:
{
test: /\.scss$/,
loader: [
MiniCSSExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
Ahora puedes agregar archivos Sass a cada componente y tendr谩s el mismo resultado que configurar directamente CSS en Platzi Conf Merch.
Configuraci贸n de tu proyecto con Less
Para darle soporte a Less dentro del proyecto debemos repetir los pasos anteriores, pero con la configuraci贸n apropiada para utilizar Less.
npm install --save-dev less less-loader
Agregar la configuraci贸n de Less a Webpack
{
test: /\.less$/,
loader: [
MiniCSSExtractPlugin.loader,
'css-loader',
'less-loader'
]
}
Configuraci贸n de tu proyecto con Stylus
Siguiendo el ejemplo de las configuraciones previas para Sass y Less vamos a repetir los pasos para agregar soporte a Stylus.
npm install --save-dev stylus stylus-loader
Ahora agregamos la configuraci贸n de Stylus a Webpack:
{
test: /\.styl$/,
loader: [
MiniCSSExtractPlugin.loader,
'css-loader',
'stylus-loader'
]
}
La configuraci贸n que 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.
驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.