Implementación de CSS en Proyectos Web con Webpack

Clase 13 de 16 • Curso de Single Page Application con JavaScript Vanilla

Contenido del curso

Development

Templates

Router

Fetch Data

Deploy

Tomar examen

Resumen

¿Cómo añadir estilos a nuestra aplicación?

Para que una aplicación web no sólo sea funcional, sino también atractiva, es crucial el uso de estilos. Estos son los encargados de darle vida y un diseño profesional. Al llegar a este punto, encontrarás esenciales los conceptos de CSS. Si necesitas ayuda adicional, te recomiendo el curso de Floren Developer, donde aprenderás a manejar CSS como un verdadero experto. El objetivo final es que los estilos de tu aplicación cautiven a los usuarios.

Copiar y aplicar estilos

El primer paso es incorporar el archivo de estilos. Aquí, te mostramos cómo hacerlo:

Obtener el archivo CSS: Se te proporcionará un enlace en la sección de recursos donde podrás descargar el archivo de estilos ya preparado.
Crear el archivo de estilos: En tu editor de código, crea un archivo nuevo llamado estilos.css y pega el contenido copiado.

/* Ejemplo básico de CSS, puedes personalizar a tu modo */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f3f3f3;
}

Integrar estilos en tu proyecto: Agrega el archivo de estilos en la sección de head dentro del archivo index.html.

<link rel="stylesheet" type="text/css" href="./estilos.css">

¿Cómo preparar el entorno para trabajar con estilos?

Un proyecto bien estructurado requiere más que solo copiar y pegar estilos. Necesitamos configurar nuestro entorno para asegurarnos de que los estilos se integren correctamente.

Instalación de dependencias: Es necesario un complemento que facilite la copia de los estilos al compilado. Esto se logra mediante npm.
```
npm install --save-dev copy-webpack-plugin
```

Configurar web con Webpack: Incluye el plugin para copiar archivos CSS en el archivo de configuración webpack.config.js.

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

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'src/estilos.css', to: 'dist' }
      ]
    })
  ]
};

¿Cómo garantizar que los estilos se apliquen correctamente?

Después de realizar las configuraciones, es importante verificar que el proceso de compilación y la aplicación de estilos funcionan bien.

Copilar y ejecutar el proyecto:
- Detén el entorno de desarrollo local.
- Compila el proyecto utilizando:
```
npm run build
```
Solucionar posibles errores: En ocasiones, pueden aparecer errores simples como rutas de archivo incorrectas. Revisa las salidas de error y ajusta las configuraciones.
Ejecutar el entorno local:
```
npm start
```
Revisión visual: Asegúrate de que los estilos se ven correctamente en el navegador y que el diseño de la aplicación es el esperado.

Consejo final para personalizar estilos

Personalizar tus estilos puede hacer que tu aplicación destaque aún más. Siéntete libre de modificar el CSS base proporcionado y comparte tus resultados con la comunidad. Observa cómo impacta cada cambio y aprende cómo diferentes propiedades de CSS afectan a la visualización. Esto no solo enriquecerá tus habilidades como desarrollador, sino que también proporcionará una mejor experiencia a los usuarios.

Recuerda, el aprendizaje constante es una de las claves para el éxito en el desarrollo web. ¡Sigue explorando y experimentando!

Alejandro Ibarra Rodriguez

student•

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

Diego Bustos Kehdy

Juan Camilo Espitia

Luis Ruiz Ramos

Enrique Orozco Gaytán

Marco Antonio González Arellano

Jhonny Lincol Quispe Navarro

Cesar Bello Bonilla

Sergio Abel Gordon Dolimpio

Carlos Roberto Villatoro Barrios

Luis Fernando Monroy Sovero

Karenn Yeraldin Hernández Duarte

Gonzalo Pimentel

Angélica Rocha

Juan Esteban Galvis

Enrique Devars

Santiago Duque

Daniel Goñas

Carlos Vallejo

Luigui Mario

Angel Cabrera

Juan Esteban García Giraldo

Diego Rodriguez

Omar Garrido García

Diego Alfonso Najera Ortiz

Juan Jose Vega

sergio vargas

Roberto Carlos Martinez Loredo

Cesar Gabriel Mejias Farreras

Rubén Ernesto Aragón Gil

Jhonatan Estiven Becerra Pedrozo

Guadalupe Giovanni Hernández Medina

Luis Lira

Jairo Merea Dueñas

Eliseo Ávila

Cristian Daniel Jesus Rios

Julio Barrios

Francisco Toledo

Bryan Castano

Juan David Valencia

Héctor Eduardo López Carballo

Implementación de CSS en Proyectos Web con Webpack

Development

Configuración de Proyectos con JavaScript, Babel y Webpack

Desarrollo de Aplicaciones SPA con API de Rick y Morty

Creación de Estructura de Proyecto con Git y NPM

Configuración de Babel y Webpack para Proyectos JavaScript

Templates

Configuración de Webpack y Babel para Proyectos con HTML y JavaScript

Creación de Templates y Secciones en JavaScript

Creación de Plantilla de Error 404 en JavaScript

Router

Manejo de Rutas en Aplicaciones Web con JavaScript

Función JavaScript para Manipulación de Rutas y Hashes

Implementación de Rutas Dinámicas en JavaScript

Fetch Data

Conexión de API para Renderizar Personajes en Aplicación Web

Conexión de API para mostrar detalles de personajes en JavaScript

Deploy

Implementación de CSS en Proyectos Web con Webpack

Automatización de Despliegue con Travis CI y GitHub

Implementación de Aplicaciones con Travis CI y GitHub Pages

Desarrollo de Aplicaciones con Vanilla JavaScript