No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

14D
6H
11M
38S

Configurar CSS para administrar elementos visuales

13/16
Recursos

Aportes 100

Preguntas 17

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Si alguno le sale un error como a mi, cuando corremos npm run build. Puede deberse a que en la clase configuramos webpack con:

<code>
new CopyWebpackPlugin([{
      from: './src/styles/styles.css',
      to: ''
    }])

Pero despu茅s de harto rato debugeando , revise en la documentaci贸n y falta poner en CopyWebpackPluguin() la propiedad patterns. El c贸digo para resolver el error puede ser.

<code>  
new CopyWebpackPluguin({
      patterns: [{ from: './src/styles/styles.css',
      to: '' }],
    })

Ojal谩 a alguno le ayude, para que no este mucho tiempo intentando de que le funcione!!!

Si alguien tiene un problema al correr npm build, prueben con esto en webpack.config

new CopyWebpackPlugin({
      patterns: [{ from: './src/styles/styles.css',
      to: '' }],
    })```


Agregue modo oscuro
Mejore el dise帽o responsive
https://erickrg96.github.io/rick-and-morty-spa/

Si tienen problemas al correr npm run build, cambien la configuraci贸n de CopyWebpackPlugin por este:

new CopyWebpackPlugin({
      patterns: [{ from: './src/styles/styles.css',
      to: '' }],
})

Si a alguien le sale el s铆guete error:

TypeError: compilation.getCache is not a function

La soluci贸n es:

  1. npm uninstall copy-webpack-plugin
  2. npm install [email protected]

Esto por que el curso se encuentra desactualizados para las versiones nuevas.

Bravaso! Que bac谩n esto de trabajar con APIs! S贸lo les comparto un detalle en la config de copy-webpack-plugin, deber铆a ser escrito as铆:

Mi reto para aprender bien todo ser谩 hacer algo similar pero con la API de pokemon, haber si entend铆 bien, manejar otra API distinta y agregarle estilos distintos.

As铆 quedo

y en m贸vil

Esto me funcion贸 para el error del build:

newCopyWebpackPlugin({
      patterns: [{ from: './src/styles/styles.css',
      to: '' }],
    })

Algunos ajutes al responsive!

@media (max-width: 780px) {
	.characters {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.characters {
		grid-template-columns: 1fr;
	}

	.characters-inner {
		grid-template-columns: 1fr;
		grid-gap: 0;
		grid-row-gap: 0;
	}
}

Para los que no les funcione: NPM RUN BUILD, a mi me funciono cambiando el campo de require asi:

const CopyWebpackPlugin = require('copy-webpack-plugin');

Ingrese a la documentaci贸n oficial y pude solucionar el problema: 馃榾
https://github.com/webpack-contrib/copy-webpack-plugin

Esta soluci贸n la dio el compa帽ero Cristian Perez Dejoy, el detalle est谩 en instalar la misma versi贸n de copy-webpack-plugin que tiene el profe 脫scar. Esta es la soluci贸n m谩s r谩pida y sin realizar tantos cambios. Sin embargo, como ya han mencionado otros compa帽eros lo mejor es analizar bien el proyecto y hacerlo trabajar con las ultimas versiones. Espero que sea de ayuda.

Solucione el error instalando la versi贸n que se utiliza en el curso.

  • npm install copy-webpack-plugin@5 --save-dev

  • En el archivo webpack.conig.js

**Nota: **desinstala copy-webpack-plugin

Me esta generando este error, no encuentro que puede ser, si a alguien le paso, le agradecer铆a me diera una mano!

Algunos estilos adaptados de YouTube 馃槈

Esto resuelve el problema con el

npm run build 
npm run start

luego de que instalan el copy-webpack-plugin:

En el archivo webpack.config.jshay que colocar:

 new CopyWebpackPlugin(
      { 
        patterns: [{ from: "./src/styles/styles.css", to: "" }],
      }
    )

Esto por la actualizaci贸n a la versi贸n principal 6.x se produjo un cambio importante: en lugar de simplemente pasar la matriz con los patrones de configuraci贸n directamente al CopyWebpackPluginconstructor, ahora debe envolverla en la patterns propiedad de un objeto y pasarla.

La info la consegu铆 aqu铆

Lo hice de otra forma implementado lo que aprendi en el curso de webpack
Utilizando este plugin para incluir CSS en el proyecto

Instalamos las siguientes dependencias:

 npm install mini-css-extract-plugin css-loader -D

Configuramos el arichivo webpack.config.js

Llamamos el plugin con una constante, agregamos una nueva regla para incluir archivos .CSS y creamos una nueva instancia del plugin en la secci贸n de Plugins.

Hola, les comparto una forma alternativa CopyWebpackPlugin y poder importar nuestros estilos al javascript en vez de al html, y se vea de esta forma

index.js

import router from './routes/index'
import './styles/styles.css' //Esto es lo que queremos lograr
window.addEventListener('load', router)

window.addEventListener('hashchange', router)

lo primero que ocupamos hacer es, en vez de instalar copy webpack plugin instalar MiniCssExtractPlugin y css loader. Este es el comando para instalarlos:

 npm i mini-css-extract-plugin css-loader -D  

teniendo eso, en el archivo de webpack.config.js importaremos el plugin asi:

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

despues agregaremos una nueva regla

      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },

y agregaremos a la parte de plugins esto:

  new MiniCssExtractPlugin({ filename: 'assets/[name].css' })

el archivo final de webpack.config.js quedo asi

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
/** @type {import('webpack').Configuration} */
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },

  resolve: {
    extensions: ['.js'],
  },

  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html',
    }),
    new MiniCssExtractPlugin({ filename: 'assets/[name].css' }),
  ],
}

y listo, ya podemos importar nuestros estilos desde el javascript
Todo esto lo aprende en el curso de webpack

al hacer el npm run build me copila sin problemas sin embargo la p谩gina me carga de esta forma no se porque, copi茅 tal cual el archivo de la clase con sus estilos

Investigando un poco los comentarios de mas abajo, la solucion que me funciono con el error al hacer build fue:

new CopyWebpackPlugin({
            patterns: [{ from: "./src/styles/styles.css", 
            to: "" }],
        }),

ESTOS SON LOS ESTILOS DEL CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap');

body {
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #3c484e;
  font-family: 'Open Sans', sans-serif;
}

.Header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Header a {
  text-decoration: none;
  color: #15302C;
}

.Main {
  padding: 10px;
  grid-template-columns: minmax(auto, 976px);
  display: grid;
  justify-content: center;
}

.Characters {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.5rem;
  grid-row-gap: 1.5em;
  display: grid;
}

.Characters-inner {
  grid-template-columns: 1fr 2fr;
  grid-gap: 1.5rem;
  grid-row-gap: 1.5em;
  display: grid;
}

.Characters-card {
  text-decoration: none;
  box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
  border-radius: 5px;
  margin: 0 0 20px 0;
  display: block;
  animation-duration: 2s;
  animation-name: fade;
}

.Characters-card img {
  width: 100%;
  height: auto;
  border-radius: 5px 5px 0 0;
}

.Characters-card h2 {
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

.Characters-card h3 {
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  margin: 20px;
}

.Characters-item {
  text-decoration: none;
  box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
  border-radius: 5px;
  margin: 0 0 20px 0;
  display: block;
  animation-duration: 2s;
  animation-name: fade;
}

.Characters-item img {
  width: 100%;
  height: auto;
  border-radius: 5px 5px 0 0;
}

.Characters-item h2 {
  font-size: 18px;
  font-weight: 300;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
}

.Characters-item a {
  text-decoration: none;
  color: #026C86;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.Main-loading {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Documentacion de copy-webpack-plugin
https://github.com/webpack-contrib/copy-webpack-plugin

Para los que tengan problemas con copy-webpack-plugin, instalen la siguiente versi贸n: npm install --save-dev [email protected]

Versi贸n Movil:
Ajustado con @media(max-widht: 600px)

Version Escritorio:

Hola, les comparto los estilos r谩pidos que hice para este proyecto

Hola compa帽eros

Chic@s a esta altura del curso me reafirmo en lo que pense al inicio al configurar la nueva version de webpack ( en mi caso webpack 5.38.1 ) quizas este curso sea actualizado pronto (espero), en que no tiene sentido desinstalar la version actual y usar una version antigua (incluso deprecada) de varias dependencias durante todo el curso, que si bien al hacerlo ya no nos causara algun error, pero no tiene mucho sentido hacer eso, es contraintuitivo usar algo antiguo e incluso deprecado鈥si que lo que les recomiendo es buscar la documentacion de la dependencia actual y guiarse de eso para completar el curso, en el siguiente link aparece la nueva estructura que debe tener el copy-webpack-plugin para que funcione:
https://www.npmjs.com/package/copy-webpack-plugin

En el CSS existe el estilo para la clase 鈥淐haracters-inner鈥, pero en el archivo 鈥淗ome.js鈥 esta la clase 鈥淐haracter-item鈥 la pueden corregir para que los estilos sean acorde a los descargados.

<h1>Para los que hayan tenido problema y no les aparezca el styles.css en dist</h1>

Lei un poco en la doc de webpack y probe con este codigo en el plugin, espero les sirva.

  plugins: [
    new HtmlWebpackPlugin(
      {
        inject: true,
        template: './public/index.html',
        filename: './index.html',
      }
    ),
    new CopyWebpackPlugin({
      patterns: [
        { from: './src/styles/styles.css', to: ''},
      ],
    }),
  ],
};

Mi resultado pero usando el api publica de estadisticas del COVID:

Cuando les aparezcan errores, generalmente es por incompatibilidad entre las versiones de los paquetes de webpack. Lo que pueden hacer es poner:

npm list webpack

Con esto ven las versiones compatibles. Luego instalan las que necesitan.
Alternativamente, pueden leer la documentaci贸n.

Saludos a todos/as.

Solo como comentario companeros. Cuando trate de hacer el 鈥渂uild鈥 me genero un error:

ERROR in   Error: html-webpack-plugin could not minify the generated output.
  In production mode the html minifcation is enabled by default.
  If you are not generating a valid html output please disable it manually.
  You can do so by adding the following setting to your HtmlWebpackPlugin config:
  |
  |    minify: false

Agrege la confuguracion que me pedia dentro de los plugins en el archivo de webpack y me logro hacer el build

Por si a alguien le aparece el error

TypeError: compilation.getCache is not a function

Prueben desinstalando el plugin actual de copy-webpack-plugin e instalen una version anterior:

npm uninstall copy-webpack-plugin
npm install copy-webpack-plugin@6.2.1

Compilando el codigo me sale este error en la terminal:

TypeError: compilation.getCache is not a function```

Mi codigo es este:



const path = require(鈥榩ath鈥);
const HtmlWebpackPlugin = require(鈥榟tml-webpack-plugin鈥);
const CopyWebpackPlugin = require(鈥榗opy-webpack-plugin鈥);

module.exports = {
entry: 鈥./src/index.js鈥,
output: {
path: path.resolve(__dirname, 鈥榙ist鈥),
filename: 鈥榤ain.js鈥
},
resolve: {
extensions: [鈥.js鈥橾,
},
module: {
rules: [
{
test: /.js?$/,
exclude: /node_modules/,
use: {
loader: 鈥榖abel-loader鈥,
}
}
]
},
plugins: [
new HtmlWebpackPlugin(
{
inject: true,
template: 鈥./public/index.html鈥,
filename: 鈥./index.html鈥
}
),
new CopyWebpackPlugin({
patterns: [
{from: 鈥./src/styles/index.css鈥, to: 鈥樷檥,
{from: 鈥./src/styles/mobile.css鈥, to: 鈥樷檥
]
}),
]
}```

Con algunos ajustes en el estilo:
https://github.com/RLCHuncp/SPA鈥擱ickAndMorty

copy-webpack-plugin

npm i copy-webpack-plugin --save-dev 

Ok ya meta casi est谩 cumplida. Mejorar茅 el css.

Les comparto mi pagina, le he agregado la interracion por las diferentes paginas que existen en el API y le he agregado el modo dark. espero les guste.

https://jesuslgarciah.github.io/cientifico/

todo iba muy bien 鈥 hasta que 鈥 este es el log que me gener贸 al hacer el npm run build, alguna idea de c贸mo corregirlo?:

Disculpen lo feo pero hay cambios en la interfaz de Platzi y todo esta muy cambiado
Seg煤n la documentaci贸n actual de CopyWebpackPlugin la configuraci贸n que me funcion贸 es la siguiente: `new CopyWebpackPlugin({ patterns: [ { from: "./src/styles/styles.css", to: "" }, ], }),`

Me mando este error al correr el comando npm install copy-webpack-plugin

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR! dev webpack@鈥4.41.2鈥 from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.1.0" from [email protected]
npm ERR! node_modules/copy-webpack-plugin
npm ERR! copy-webpack-plugin@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /root/.npm/_logs/2023-05-29T21_56_04_490Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2023-05-29T21_56_04_490Z-debug-0.log

驴qu茅 procede? Ok, voy a reinstalar webpack y volver a correr el mismo comando, por lo que entiendo son las versiones del webpack

Si alguien le sirve, hice el CSS lo m谩s responsive que pude :3

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap');

body {
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #3c484e;
  font-family: 'Open Sans', sans-serif;
}

.Header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a {
  text-decoration: none;
  color: #15302C;
}

.about {
  display: block;
  margin-bottom: 20px;
  font-size: 18px;
  margin-left: 8px;
}

.Main {
  padding: 10px;
  grid-template-columns: minmax(auto, 976px);
  display: grid;
  justify-content: center;
}

.Characters {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.5rem;
  grid-row-gap: 1.5em;
  display: grid;
  place-content: center;
  place-items: center;
}

@media screen and (max-width:1009px) {
  .Characters {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width:655px) {
  .Characters {
    grid-template-columns: repeat(1, 1fr);
  }
}

.Characters-inner {
  grid-gap: 1.5rem;
  grid-row-gap: 1.5em;
  display: grid;
  place-content: center;
}

@media screen and (min-width:600px) {
  .Characters-inner {
    grid-template-columns: 1fr 2fr;
  }
}

.Characters-card {
  text-decoration: none;
  box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
  border-radius: 5px;
  margin: 0 0 20px 0;
  display: block;
  animation-duration: 2s;
  animation-name: fade;
}

.Characters-card img {
  width: 100%;
  height: auto;
  border-radius: 5px 5px 0 0;
}

.Characters-card h2 {
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

.Characters-card h3 {
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  margin: 20px;
}

.Characters-item {
  text-decoration: none;
  box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
  border-radius: 5px;
  margin: 0 0 20px 0;
  display: flex;
  animation-duration: 2s;
  animation-name: fade;
  max-width: 305px;

}

.Characters-item img {
  width: 100%;
  height: auto;
  border-radius: 5px 5px 0 0;
}

.Characters-item h2 {
  font-size: 18px;
  font-weight: 300;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
}

.Characters-item a {
  text-decoration: none;
  color: #026C86;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.Main-loading {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Si tienen problemas al correr el npm run build modifiquen la versi贸n del html-webpack-plugin en el package.json a la v 5.3.2 como esta en la siguiente documentaci贸n https://stackoverflow.com/questions/68302157/i-upgraded-my-webpack-v4-to-v5-and-after-that-i-am-getting-a-cannot-add-propert

me funciono asi:

new CopyWebpackPlugin({
patterns: [
{
from: 鈥./src/styles/styles.css鈥,
to: 鈥溾,
},
],
}),

Cambie el color de fondo y ubique algunos elementos distintos .

Apartado de caracter铆sticas del personaje

Le cambi茅 el color de fondo
![](

Listo 馃槂

uno de los mejores profes

No se ustedes pero el profe (ni yo, la primera vez que hice este curso) nos dimos cuenta que los estilos no estaban siendo aplicado a los Characters-item ni a sus elementos internos, ya que el profe tuvo un typo que no fue corregido a lo largo de todo el curso, no entend铆a por qu茅 no eran aplicados los cambios de varios selectores y al final fue por eso:
Era Characters-item y no Character-item

En el css si adicionan esto pueden hacer que la animaci贸n del elemento de nombre loading est茅 posicionado al medio de Characters-item, el elemento loading solo aparece instantes antes de que llamemos al router y nos devuelva los datos as铆 que solo se puede apreciar en conexiones muy lentas o si hubo alg煤n problema en red

#content {
  position: relative;
  height: 100vh;
}
.Main .loading {
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  animation: spin 1.75s linear infinite;
}

si cada vez que tiene que configurar algo en webpack y les sale algun error se debe a las nuevas versiones de webpack las cuales se ven el curso de webpack que acabo de salir y donde se trabaja con html, css, sass y stylus ahi aprenderas como configurarlo correctamente

Si aun sigues sin poder usar copy-webpack-plugin, sigue los siguientes pasos.

Instala los siguientes plugins

npm install --save-dev css-loader
npm install --save-dev style-loader

Agrega esta configuraci贸n a tu webpack

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Elimina las lineas que se indican sobre copy-webpack-plugin

Ahora vuelve a correr: npm run build y posteriormente npm run start
Fuentes:

Yo us茅 las dependencias: mini-css-extract-plugin, css-loader, style-loader y file-loader 驴Por qu茅? porque de esta manera yo evito 鈥渢ocar鈥 mi plantilla HTML al linkear mi hoja de estilo manualmente, as铆鈥 con los loader, webpack tiene el control de cada una de las hojas de estilos que se vayan a utilizar y tambi茅n insertarlo en mi plantilla html, ya sea en dev o production mode.
Para eso, tuve en cuenta lo siguiente.
Primero: requerir en el archivo webpack.config.js el m贸dulo mini-css-extrat-plugin y luego definir las reglas.
![](
![](
Segundo: en Plugins, por medio de un objeto de la dependencia mini-css-extrat.plugin, indicarle por medio de la opci贸n filename determinar el nombre y ruta de cada archivo css output en modo dev o build.
![](
Tercero:* Ahora bien, como el archivo css principal importa una URL de fonts.google.api, tambi茅n hay que indicarle a webpack que lo gestione, para eso es la dependencia file-loader y tambi茅n hay que definir una regla, as铆.
![](.
Cuarto: en el archivo index.js importar la hoja de estilo.
![](

para los que les sale el error de

TypeError : compilation.getCache is not a function

yo lo solucion茅 con esto

npm uninstall copy-webpack-plugin  

//desinstalan la versi贸n del copy webpack que tienen

npm install copy-webpack-plugin@6.2.1  

//instalan esta versi贸n de copyWebpack

No me jal贸 con CopyWebpackPlugin

Us茅 y para poder insertar los estilos a mi proyecto.

aqu铆 les dejo la instalaci贸n del plugin con la versi贸n del profesor

npm i -D -E copy-webpack-plugin@5.1.1   
:root{
    --text-color-default: rgb(22, 22, 22);
    --text-info-color: rgb(29, 66, 26);
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
    font-family: monospace;
}
/*---Header---*/
.Header-main {
    display: flex;
    padding:10px 0;
    border-bottom: black solid 1px;
    margin-bottom: 0%;
}
.Header-logo{
    margin-left:3%;
}
.Header-logo a{
    text-decoration: none;
    color: var(--text-color-default);
    font-size: 2.8rem;
    transition: 1s;
}
.Header-nav{
    margin-left: auto;
    margin-right: 2%;
    font-size: 2.8rem;
}
.Header-nav a{
    text-decoration: none;
    color: var(--text-color-default);
    transition: 1s;
}
.Header-main a:hover{
    font-size: 3.2rem;
}
/*--Home--*/
.Characters{
    display: grid;
    justify-items: center;
    grid-gap: 70px 0;
    margin-top: 3%;
    grid-template-columns: repeat(3 , 1fr);
}
.Characters img{
    width: 80%;
    height: auto;
    border-radius: 2rem;
    display: block;
    margin: 0 auto;
    transition: 1s;
}
.Characters h2{
    font-size: 2.5rem;
    text-align: center;
    color: var(--text-color-default);
    margin: 5% 0;
}
.Characters a{
    text-decoration: none;
}
/*--characters--*/
.Characters-inner{
    display: flex;
    margin: 0 auto;
    width: 90%;
    margin: 3%;
}
.Characters-card img , .Characters-card h2{
    border-radius: 2rem;
    font-size: 2.5rem;
    text-align: center;
    padding: 10px 0;
}
.Characters-card h3{
    font-size: 1.8rem;
    font-weight: 0;
    margin: 10px 30px;
    color: var(--text-info-color);
}
/*--Error404--*/
.Error404{
    min-height: 700px;
    margin: auto;
    background-image: url('https://www.cinco8.com/wp-content/uploads/2020/08/404.png');
    background-repeat: no-repeat;
    background-size: cover;
}

As铆 quedo el m铆o, un poquito mas de detalles

**Me salio el error: compilation.getLogger is not a function **, tuve que actualizar webpack a 5.2.0 , webpack-cli a 4.1.0 y poner new CopyWebpackPlugin({ patterns: [{ from: './src/styles/styles.css', to: '' }], })

Alguna idea de c贸mo compilar archivos .scss con webpack? yo normalmente lo hago con gulp, pero no s茅 como hacerlo con webpack. Gracias!

puedes usar el flag -D en npm para guardar como dependenciad e desarrollo 鈥渘pm install copy-webpak-plugin -D鈥

copy-webpack-plugin

En efecto, gracias compa帽eros, si es necesario realizar el ajuste del copywebpack

Perfecto

genial

As铆 me qued贸

se me generaron 3 vulnerabilidades y son estas, que pueda hacer ah铆?

Hasta ahora todo bien, buen ojo con los errores para completar cualquier caracter que falte! (Y)

A帽adido estilos propios 馃槈

![](

Pasa pausar cualquier operacion en la consola 鈥渃on windows: control + c鈥

Reto:

Muchas Gracias profesor y a Mauros quinteros quien dejo una forma de compilar los estilos que me funcion贸 todo me estaba funcionando pero, al momento de ejecutarlo en el navegador no me la mostraba con estilos. 馃槃

Para evitar todo tipo de problemas con versiones, utilicen la misma que est谩 utilizando Oscar.

Eliminen node_modules folder, reemplacen la secci贸n de devDependencies y ejecuten el npm install. Si tienen tiempo, h谩ganlo funcionar con las versiones m谩s nuevas.

鈥渄evDependencies鈥: {
"@babel/core": 鈥^7.7.5鈥,
鈥渂abel-loader鈥: 鈥^8.0.6鈥,
鈥渃opy-webpack-plugin鈥: 鈥^5.1.1鈥,
鈥渉tml-webpack-plugin鈥: 鈥^3.2.0鈥,
鈥渨ebpack鈥: 鈥^4.41.2鈥,
鈥渨ebpack-cli鈥: 鈥^3.3.10鈥,
鈥渨ebpack-dev-server鈥: 鈥^3.9.0鈥
}```

Complemento para estilos

npm install copy-webpack-plugin --save-dev```

webpack.config.js

const path = require('path'); //Nos permite acceder a donde est谩mos en las carpetas. Ya sea en local o en la nube.
const HtmlWebpackPlugin = require('html-webpack-plugin'); //Archivo necesario para trabajar con HTML.
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = { //Aqu铆 se encuentra toda la configuraci贸n de lo que va a suceder. Modulo para exportar.
    entry: './src/index.js', //Punto de entrada con su direcci贸n.Aqu铆 vive el c贸digo inicial y de aqu铆 parte al desarrollo.
    output: { //Donde se env铆a el proyecto estructurado y compilado listo para producci贸n.
        path: path.resolve(__dirname, 'dist'), //Creamos el lugar d贸nde se exportar谩 el proyecto.
        filename: 'main.js' //Este es el nombre del archivo final para producci贸n.
    },
    resolve: {
        extensions: ['.js'], //Extensiones que vamos a utilizar.
    },
    module: { //Se crea un modulo con las reglas necesarias que vamos a utilizar.
        rules: [ //Reglas
            { // Estructura de Babel
                test: /\.js?$/, //Nos permite identificar los archivos seg煤n se encuentran en nuestro entorno.
                exclude: /node_modules/, //Excluimos la carpeta de node modules
                use: {
                    loader: 'babel-loader', //Utilizar un loader como configuraci贸n establecida.
                }
            }
        ]
    },
    plugins: [ //Establecemos los plugins que vamos a utilizar
        new HtmlWebpackPlugin( //Permite trabajar con los archivos HTML
            {
                inject: true, //C贸mo vamos a inyectar un valor a un archivo HTML.
                template: './public/index.html', //Direcci贸n donde se encuentra el template principal
                filename: './index.html' //El nombre que tendr谩 el archivo

            }
        ),
        new CopyWebpackPlugin({
            patterns: [{
                from: './src/styles/styles.css',
                to: ''
            }],
        })
    ]
}```

Aqu铆 esta el reto:

Tuve un error decia que no encontraba webpack-cli, lo solucione

npm i -g webpack-cli

Este c贸digo me funciono:

plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: "./public/index.html",
      filename: "./index.html",
    }),
    new CopyWebpackPlugin({
      patterns: [{ from: "./src/styles/styles.css", 
      to: "" }],
    }),
  ],

Genial, Gracias a los aportes de los compa帽ero logre generar el archivo .css 馃挭馃挭

Si alguno le sigue fallando a pesar de aplicar la soluci贸n que dio Diego Bustos Hehdy, el compa帽ero que coment贸 antes de este comentario que yo hago, es porque adicionalmente hay que instalar un paquete mas de copy-webpack-plugin en el proyecto, que no esta en el curso ni en los archivos del curso, el paquete se llama @types/copy-webpack-plugin lo debes instalar con npm install @types/copy-webpack-plugin --save-dev y listo ya deber铆a funcionar.

Si tienes un error, lee la consola, para eso se creo el comando de 鈥渂uild鈥 a mi me arrojaba este, y me muestra el error.

Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:

new CopyWebpackPlugin({
    patterns: [{
        from: './src/styles/styles.css',
       to: ''
    }],
})	

Utilizando Bulma

Buen video, pero como dicen antiguos companieros atentos a poner 鈥楶atterns:鈥

Otra opci贸n que tenemos y adem谩s podemos agregar optimizaci贸n es usar el MiniCssExtracPlugin Que aprendimos a usar en el curso de Webpack 馃榿

Es importante para que les funcione correctamente , comparen el archivo que tiene el profe (package.js) , este archivo debe ser igual al de ustedes (en la parte de las dependencias).Si tiene alguna diferencia lo mejor que pueden hacer es borrar la carpeta node_modules y volver a instalar las dependencias con las versi贸n que tiene el profesor (las versiones est谩n en el archivo package.js)

como puedo hacer para que la compilacion con webpack sea mucho mas rapida? haciendo un cambio me demora aproximadamente 5 segundos en compilar

Muy complicado, lo hice todo sin webpack

personalmente el curso de frontend developer no es el mejor si llegas desde 0 con html y css. Para mi los mejores para tener claro el tema son:

con el resto de cursos referentes al tema se puede reforzar lo aprendido en los dos anteriores

Otro plugin que te puede servir para el css es:

npm i mini-css-extract-plugin -D

Configuracion:

new MiniCssExtractPlugin({
   filename: 'assets/[name].css'
})

rule

{
     test: /\.(s*)css$/,	
     use: [
          {
               loader: MiniCssExtractPlugin.loader
           },
           'css-loader',
           'sass-loader',
                    
        ]
     }

en mi caso uso sass y queda de la siguiente forma

Si aparece algun error con get.CAche usar esto

npm uninstall copy-webpack-plugin
npm install copy-webpack-plugin@6.2.1```

Si tienen alg煤n problema en el compilado, intenten trabajar con la versi贸n del copy-webpack-plugin que se usa en el curso. corran:

npm i -D -E copy-webpack-plugin@5.1.1

Y copien tal cual la configuraci贸n como la hace el profesor, ya que al parecer en esa versi贸n todav铆a se utilizaba como convenci贸n los brackets para los esquemas.

A m铆 me funcion贸 as铆:
1. Instalando CopyWebpackPlugin actualizado Diciembre 2020

$ npm install copy-webpack-plugin --save-dev --save

2. Luego agregan el plugin en el archivo webpack.config.js

const CopyPlugin = require("copy-webpack-plugin");
////
////
////
module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "./src/styles/styles.css", to: " " },
      ],
    }),
  ],
};

La ruta tiene que estar como han nombrado sus carpetas.
Siempre revisen la documentaci贸n porque se actualiza. Buscan el plugin en Google, en este caso CopyWebpackPlugin y les saldr谩 los pasos.

No he podido agregar una imagen de fondo, alguien me puede explicar c贸mo se agregan? Intent茅 agregando file-loader pero tampoco funciona

Ya he probado con todos los consejos que dan pero sigue sin funcionarme, alguien me podr铆a ayudar?

Copiar los estilos al compilado que estamos generando
npm install copy-webpack-plugin --save-dev

error en css es decir en orden se soluciona poniendo ruta exacta en href en el html
<link type=鈥渢ext/css鈥 rel=鈥渟tylesheet鈥 href="鈥/src/styles/styles.css"

espero que les ayude

npm install copy-webpack-plugin --save-dev