En esta entrega vamos a instalar los paquetes necesarios para que webpack sepa como tratar estilos e imágenes en nuestro proyecto de react.
Estilos
Nos disponemos a instalar los paquetes necesarios:
npm install --save-dev mini-css-extract-plugin css-loader node-sass sass-loader
node-sass
Esta librería transforma sass o scss a css, es usada por sass-loader.
sass-loader
Nos ayuda a cargar los archivos sass o scss y convertirlos a css, internamente usa node-sass para ello.
css-loader
Nos ayuda a resolver las importaciones del tipo import css from 'file.css'; que declaremos en nuestra aplicación de react.
mini-css-extract-plugin
Nos ayuda a guardar en disco los archivos css que fueron el resultado de ser tratados con los plugins descritos anteriormente.
Agregando el soporte de estilos a Webpack
Como paso siguiente debemos editar nuestro webpack.config.js para configurar los plugins
Añadiendo la nueva regla a webpack.config.js
Tenemos que añadir una nueva regla para que webpack pueda reconocer y transformar los archivos scss, css.
{
test: /\.(s*)css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
"css-loader",
"sass-loader",
],
},
Importando mini-css-extract-plugin
En la parte superior igual indicaremos que vamos a requerir mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
Usando mini-css-extract-plugin
En la sección de scripts debemos agregar el uso de este nuevo plugin para poder exportar los css previamente convertidos.
plugins: [
...
new MiniCssExtractPlugin({
filename: "assets/[name].css",
}),
],
Todo junto
Teniendo como resultado el siguiente:
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*)css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
"css-loader",
"sass-loader",
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "index.html",
}),
new MiniCssExtractPlugin({
filename: "assets/[name].css",
}),
],
};
Agregando un estilo
Dentro de src debemos crear un carpeta nueva llamada assets y dentro de esta una llamada styles. Seguido debemos crear un archivo llamado Main.scss.
Deberemos tener un árbol de archivos y directorios como el siguiente.
.
├── dist
│ ├── bundle.js
│ └── index.html
├── public
│ └── index.html
├── src
│ ├── assets
│ │ └── styles
│ │ └── Main.scss
│ ├── components
│ │ └── HolaMundo.jsx
│ └── index.js
├── .babelrc
├── package-lock.json
├── package.json
└── webpack.config.js
Main.scss
Solo debemos colocarle el siguiente contenido de prueba.
$background-color: #282c34;
$text-color: #fff;
* {
margin: 0;
padding: 0;
}
.container {
background-color: $background-color;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: $text-color;
}
Importando Main.scss
Lo que debemos hacer es importar nuestros estilos en nuestro componente HolaMundo.jsx y hacerle una actualización para que tenga un div contenedor.
import React from "react";
import "../assets/styles/Main.scss";
const HolaMundo = () => {
return (
<div className="container">
<h1>Hola mundo</h1>
</div>
);
};
export default HolaMundo;
Probando los estilos.
Como ultimo paso de esta sección solo debemos correr nuestro proyecto y ver si todo marcha bien.
npm run start
Imágenes
En el caso de las imágenes el procedimiento es un poco mas sencillo, lo primero es añadir el plugin file-loader de webpack.
npm install --save-dev file-loader
file-loader
Resuelve las importaciones de archivos y nos permite guardarlos, en este caso lo usaremos para que resuelva las imágenes.
Agregando el soporte de imágenes a Webpack
Como paso siguiente debemos editar nuestro webpack.config.js para configurar el loader.
Añadiendo la nueva regla
Tenemos que añadir una nueva regla para que webpack pueda reconocer los archivos png, jpe, jpeg, gif e indicarle donde debe guardarlos
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: { name: 'assets/[hash].[ext]' },
},
],
},
Teniendo como resultado lo siguiente.
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*)css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
"css-loader",
"sass-loader",
],
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: "file-loader",
options: { name: "assets/[hash].[ext]" },
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "index.html",
}),
new MiniCssExtractPlugin({
filename: "assets/[name].css",
}),
],
};
Agregando una imagen
Ahora dentro de la carpeta assets debemos crear una carpeta llamada static en donde guardaremos nuestra imagen, en mi caso busque una de react en iconfinder y la guarde con el nombre de react.png.
Obtenemos un árbol de archivos y directorios como el siguiente.
.
├── dist
│ ├── bundle.js
│ └── index.html
├── public
│ └── index.html
├── src
│ ├── assets
│ │ ├── static
│ │ │ └── react.png
│ │ └── styles
│ │ └── Main.scss
│ ├── components
│ │ └── HolaMundo.jsx
│ └── index.js
├── .babelrc
├── package-lock.json
├── package.json
└── webpack.config.js
Importando la imagen.
A continuación debemos modificar de nuevo nuestro componente HolaMundo.jsx para importar la imagen, después agregar una etiqueta img para poder visualizarla.
import React from "react";
import "../assets/styles/Main.scss";
import reactImg from "../assets/static/react.png";
const HolaMundo = () => {
return (
<div className="container">
<img src={reactImg} alt="imagen de react" />
<h1>Hola mundo</h1>
</div>
);
};
export default HolaMundo;
Probando la importación de imágenes
Ahora solo debemos correr de nuevo el servidor de desarrollo.
npm run start
Despedida
Ahora ya tenemos soporte de estilos e imágenes, en la siguiente entrega daremos soporte de ESLint para tener mejores practicas de programación.
Top comments (1)
Excelente Tutorial Fabio