Configurar CSS para administrar elementos visuales

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: '' }],
    })```

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

Algunos estilos adaptados de YouTube 😉

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

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;
	}
}

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

Esto me funcionó para el error del build:

newCopyWebpackPlugin({
      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); }
}

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: "" }],
        }),

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

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.

Compilando el codigo me sale este error en la terminal:

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

Mi codigo es este:

const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const CopyWebpackPlugin = require(‘copy-webpack-plugin’);

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’,
}
}
]
},
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: ‘’}
]
}),
]
}```

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: ''},
      ],
    }),
  ],
};

Ok ya meta casi está cumplida. Mejoraré el css.

copy-webpack-plugin

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

Solo como comentario companeros. Cuando trate de hacer el “build” 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

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?:

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

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.

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

Hola compañeros

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

En el CSS existe el estilo para la clase “Characters-inner”, pero en el archivo “Home.js” esta la clase “Character-item” la pueden corregir para que los estilos sean acorde a los descargados.

![](

puedes usar el flag -D en npm para guardar como dependenciad e desarrollo “npm install copy-webpak-plugin -D”

Añadido estilos propios 😉

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

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: ''
            }],
        })
    ]
}```

Complemento para estilos

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

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: "" }],
    }),
  ],

copy-webpack-plugin

Yo usé las dependencias: mini-css-extract-plugin, css-loader, style-loader y file-loader ¿Por qué? porque de esta manera yo evito “tocar” 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.
![](

Perfecto

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.

Buen video, pero como dicen antiguos companieros atentos a poner ‘Patterns:’

Utilizando Bulma

Listo 😃

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); }
}

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;
}

uno de los mejores profes

me funciono asi:

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

genial

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

Pasa pausar cualquier operacion en la consola “con windows: control + c”

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

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.

“devDependencies”: {
"@babel/core": “^7.7.5”,
“babel-loader”: “^8.0.6”,
“copy-webpack-plugin”: “^5.1.1”,
“html-webpack-plugin”: “^3.2.0”,
“webpack”: “^4.41.2”,
“webpack-cli”: “^3.3.10”,
“webpack-dev-server”: “^3.9.0”
}```

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

npm i -g webpack-cli

Genial, Gracias a los aportes de los compañero logre generar el archivo .css 💪💪

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

Si tienes un error, lee la consola, para eso se creo el comando de “build” 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: ''
    }],
})	

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: '' }], })

: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;
}

aquí les dejo la instalación del plugin con la versión del profesor

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

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:

• css-loader

• style-loader

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

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

Cambie el color de fondo y ubique algunos elementos distintos .

Apartado de características del personaje

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 aparece algun error con get.CAche usar esto

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

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

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

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

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

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:

• el curso definitivo de HTML y CSS

• el curso practico de HTML y CSS

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

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=“text/css” rel=“stylesheet” href="…/src/styles/styles.css"

espero que les ayude

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.

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.

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

Muy complicado, lo hice todo sin 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)