Bro creo que el static va en la carpeta public, no en dist.
Llegados a este punto donde hemos terminado la configuracion minima de nuestro proyecto, me gustaria compartir con todos los que estamos aprendiendo, un par de recomendaciones y consejos.
.
Pero antes les dejo por aqui unos enlaces para que puedan leer y solucionar posibles problemas con que se puedan topar referentes a esta clase :
sass-loader doc
{test:/\.s[ac]ss$/i,use:[// Creates `style` nodes from JS strings"style-loader",// Translates CSS into CommonJS"css-loader",// Compiles Sass to CSS"sass-loader",],},
.
El esquema correcto para configurar DevServer es el siguiente:
Por eso el error en el minuto 9:40.
En el minuto 10:18 se ve que hay un corte en el video y Oscar ya ha borrado la configuracion de DevServer.
Si quieren leer un poco mas les dejo la documentacion oficial:
DevServer Doc
.
Ahora si, los consejos:
Este tipo de configuraciones las hacemos unicamente en proyectos que sean MUY personalizados o bien en proyectos personales donde estemos aprendiendo a utilizar dichas herramientas.
En el mundo laboral, (dependiendo de la empresa) la mayoria de organizaciones necesitan entregar productos rapido, y que sean funcionales.
Algunas empresas por ejm, en entrevistas tendran que hacer una prueba tecnica, y probablemente esa prueba sea un ejercicio practico live coding.
A lo que quiero llegar con esto es que si llegan a tener una prueba tecnica similar con tiempo limitado, no cometan el error de ponerse a hacer estilos con css puro o sass, y configuraciones desde cero existiendo herramientas para ello. (Por supuesto esto depende del proyecto).
Ultimamente create-react-app ha dejado de obtener un buen soporte y lanza muchos WARNINGS, en su lugar tambien existe Vite que personalmente me gusta mucho mas ya que es mas rapida y facil.
Para estilos, si ya tenemos buenas bases de CSS podemos aprender al menos 3 frameworks, yo recomendaria TailwindCSS, este tiene muy buen soporte para configurarlo ya sea con create-react-app o con Vite y su doc es muy limpia y entendible, pero tambien existen otros como MaterialUI, etc.
Las herramientas existen para facilitarnos la vida, asi que usemoslas 🤗.
.
++Psdt++: No estoy desmeritando el curso, me esta encantando hasta ahora. 💚
Nada mas comparto algunos de los errores que yo cometi en mi primer entrevista y que ustedes pueden evitar si van bien preparados. ✨
GRACIAS, ESO DEFINITIVAMENTE ES, SER !!PRAGMÁTICO!!
Excelente aporte!! ☆☆☆☆☆
Después de ejecutar npm run start:
Jajaja amo mis ojos y preferí poner otro color
Mis pobres ojos de front no soportan tanto daño, yo lo puse moradito :3
React con Css y Sass
Instalaremos algunos loaders y plugins para que nuestro proyecto pueda funcionar con estilos de css y sass
npm instal mini-css-extract-plugin css-loader style-loader sass sass-loader -D
// en el video, faltaba solamente el loader de sass por los que nos dio un error
// como siempre, cada vez que instalamos dichas dependencias, en webpack debemos // indicar reglas y los pluginsmodule.exports={...module:{rules:[...{test:/\.s[ac]ss$/i,use:["style-loader","css-loader","sass-loader"]}...]}...,plugins:[...newMiniCssExtractPlugin({filename:'[name].css'})...],devServer:{allowedHosts: path.join(__dirname,'dist'),// contentBase corresponde a webpack 4// ahora en Webpack 5 se usa allowedHosts// créditos al compañero Fabian Rivera Restrepoport:3005,compress:true,}}
// creamos la carpeta styles dentro de src// en styles, creamos el archivo global.scss$base-color:#ff0000;$color:rgb(black,0.88);body {background-color:$base-color;color:$color;}
// en App.jsx, importamos los estilos de scssimport'../styles/global.scss';
// ahora si podemos compilar otra vez nuestra app
npm run build
Yo si instale el 'sass-loader' pero por alguna razon se me olvido instalar sass, pense que por tenerlo instalado de manera global funcionaria, si no hubiera sido por tu observacion no salgo del error, ni en stackoverflow encontraba como solucionarlo, gracias.
actualización al 25/03/2022
cuando les salga un error es porque este codigo ya no se usa:
esto es porun tema de actualizacion de parte de webpack, nno soy experto en el tema pero buscando lo encontre, lo probe y funciono de esas dos maneras, suerte a todos.
PSD: por mas que se hagan las instalaciones grupales de las herramientas a veces aun asi falla, para eso lean que falta y vuelvan a instalarlo por ejemplo:
npm install sass-loader
Buen aporte ,se agradece mucho
excelente
JAJAJJAJ ni dice que saca todo, automaticamente lo hace desaparecer xddd
No me funcionó, sin embargo omití la siguiente parte y arrancó:
Con esto listo, creamos una carpeta 'styles' dentro de 'src' y añadimos global.scss con los estilos que querramos. Luego, en nuestro archivo App.jsx podemos instanciar nuestro archivo css con:
import'../styles/global.scss';
que onda amigo, a mi me sale un error cuando escribo el comando npm run start, me dice algo de contentBase, cual seria la solucion ?
Hola Diego!
Puedes postear el error que te arroja para poder ayudar?
Saludos!
Creo que podría ser esto, modifica el devServer de esta forma
Al ejecutar npm run start me lanza este error. ¿Alguien sabe como solucionarlo?
TypeError: MiniCssExtractPlugin is not a constructor
Tengo el mismo problema hermano, y no le he podido dar solucion.
creo que tiene que ver con la importación (require) del MiniCssExtractPlugin pero no tengo idea sobre qué ocurre exactamente.
Aunque hago siempre eso de repetir los cursos y buscar info para poder entender todo es verdad que se hace muy tedioso sobre todo cuando tienes toda esta parte de configuraciones y errores que para nada pienso que me vayan a servir de algo para conseguir mi primer trabajo como junior. Según he visto muchos testimonios en internet y de algún amigo mío jamás te van a preguntar en una entrevista cómo hacer todas esas configuraciones. En mi opinión estas partes de los cursos están mal enfocadas ya que se debería pensar más en el perfil que vamos a tener una vez aprendamos lo básico y ya si acaso en cursos más avanzados dar toda la parte de config. Lo siento pero no creo que me esta parte vaya a servir a un junior nada más que confundir y frustrar.
Yo siempre lo veo por la parte de entender como realmente funcionan las tecnologías que haré uso, es decir, aunque no me exijan en un trabajo tener conocimientos manuales de configurar Webpack, si me dará la habilidad de sentirme más libre usando las herramientas teniendo noción de como funcionan por atrás, así en futuros errores tener más noción de que sucede o no.
para solucionar este error , hay q modificar la propiedad **contentBase ** y usar usar static en la configuracion de devServer.
deberia quedar asi
Buen aporte!
Exelente amigo
pregunta, estoy notando que en estos frameworks y formas de programar, todo es plugin, plugin, depentendia, libreria etc... que pasa si mi idea es crear algo unico una idea de negocio que depende de un software hecho por mi para convertirlo incluso en una gran compañia? deberia entonces aprender a desarrollar cada cosa de esas? no deberia es aprender a hacer esos plugins y no deberian enseñarmelo aqui en vez de decirme instala esto instala lo otro, ni te fijes ni te diremos como funcionan solo instalalos que te van a durar toda la vida y toda la vida los van actualizar otras personas para que tu aplicacion millonaria siga funcionando... ??? como funciona eso alli? me estan enseñando a programar en platzi o me estan enseñando a instalar plugins y programar cositas basicas tipo CRUDs y ya?
