Configurar CSS y SaaS en React con Webpack

Contenido del curso

Introducción a Webpack

Proyecto inicial

Loaders y Plugins en Webpack

Deploy del proyecto

Herramientas de desarrollo complementarias

Integración básica de React.js

Próximos pasos

28
Configuración y Uso de Webpack con React
00:48 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:24

Configurar CSS y SaaS en React con Webpack

Curso de Webpack

Clase 25 de 28

Clase 25 / 28

Recursos

¿Cómo integrar CSS en un proyecto React con Webpack?

Integrar CSS en un proyecto React no solo es esencial para darle estilo y vida a tus aplicaciones, sino también una potente herramienta si configuras tu entorno adecuadamente. Con Webpack, puedes manejar CSS, SCSS y otros preprocesadores eficientemente. ¡Emprendamos el camino para lograrlo!

¿Qué recursos necesitamos instalar?

Para empezar correctamente, es vital contar con las dependencias y plugins adecuados:

Mini CSS Extract Plugin: Permite extraer CSS en archivos separados, ideal para manejar diferentes fuentes de CSS.
CSS Loader: Para importar archivos CSS en JavaScript.
Style Loader: Agrega estilos CSS al DOM inyectándolos en etiquetas <style>.
Sass y Sass Loader: Facilitan trabajar con SCSS, un preprocesador que amplía las capacidades del CSS.

Estos recursos se instalan con el siguiente comando en la terminal:

npm install mini-css-extract-plugin css-loader style-loader sass sass-loader --save-dev

¿Cómo configuramos Webpack para CSS?

La clave está en configurar el archivo webpack.config.js. Sigamos un paso a paso confidencial:

Importaciones necesarias: Comienza importando MiniCssExtractPlugin al archivo.

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

Reglas y Loaders: Añade una nueva regla para manejar archivos SCSS o CSS.

{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'
  ]
}

Configuración del Plugin: Configura una instancia del plugin.

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

Esto asegurará que tu proyecto está preparado para manejar y compilar archivos .scss.

¿Cómo preparamos nuestros estilos?

Ahora que Webpack está configurado, es momento de crear y vincular tus hojas de estilo:

Crear archivo SCSS: En el directorio src, crea una carpeta styles y dentro un archivo global.scss.

Definir estilos base: Establece variables y estilos iniciales para tu proyecto.

$base-color: #c6538c;
$text-color: rgba(0, 0, 0, 0.88);

body {
  background-color: $base-color;
  color: $text-color;
}

Integración en React: Finalmente, importa los estilos en tu componente principal.
```
import './styles/global.scss';
```

¿Cómo ejecutamos nuestro proyecto?

Una vez que todo está en su lugar, es hora de levantar nuestro entorno local de desarrollo para visualizar cambios en tiempo real:

Comando de arranque: Ejecuta el comando en tu terminal para iniciar el servidor local.
```
npm start
```
Visualización: Verás tu aplicación corriendo con los estilos aplicados en el puerto que especificaste.

Implementar y configurar CSS en tu proyecto React utilizando Webpack no solo optimiza el desarrollo, sino que potencia tu aplicación para estar lista para producción. ¡Continúa aprendiendo y experimentando, ya que cada ajuste mejora tus habilidades y conocimientos!

María de los Milagros Vilchez

Hace 5 años

Me sale error

ERROR in ./src/styles/global.scss 1:11
Module parse failed: Unexpected token (1:11)
You may need an appropriate loader to handle this file type, currently no loader
s are configured to process this file. See https://webpack.js.org/concepts#loade
rs
> $base-color: #c6538c;
| $color: rgba(black, 0.88);
|

mi package.json :

{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "name": "curso-webpack-react",
  "description": "",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.2.0",
    "sass": "^1.38.0",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.2.1",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/platzi/curso-webpack-react.git"
  },
  "keywords": [],
  "author": "Milagros Vilchez <milagrosvilchez02@gmail.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/platzi/curso-webpack-react/issues"
  },
  "homepage": "https://github.com/platzi/curso-webpack-react#readme"
}

mi webpack.config:

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[ac]ss%/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ],
    devServer: {
        compress: true,
        port: 3006
    }
}

Obed Paz

Hace 5 años

mmm creo que es el mismo error del que hablaste en otra pregunta. Me parece que tienes un typo en la expresion regular al momento de cargar los loaders para CSS.

. Otra cosa, ten en cuenta que estas usando el style-loader, ese loader inyecta el CSS directamente en el DOM, si quieres que el output te resulte un archivo CSS aparte en el dist, usas el loader que trae el plugin que instalamos, el de MiniCssExtractPlugin.

Duvan Alexis Palomino Ramirez

Hace 4 años

verifica tu expresion regular en el archivo webpack.config, me paso lo mismo y tenia un error en el typo

Comentarios (41)41 comentarios

Fernando Quinteros Gutierrez

Hace 6 años

Felix Torres Javier Antonio

Nicolas Mauricio Cuadrado Avila

Hernán David Mercado Fernández

Erwin Frias

Jhean Pacheco

Carlos Restrepo

Alonso Fabricio Samanez Nuñez

Juan Jose Hernandez Garcia

Andres Prieto

Rodrigo Rodriguez

Jonh Pertuz pertuz

Lautaro Bustos

Giusseppe Pérez Mendoza

Oscar Fuentes Esteves

Cindy Carolina Campos Navarro

Christian Boffill

Julian David Alzate Cuervo

Lucas Aristizábal

Santiago Felipe Piedriz Pasos

José Gregorio Estrada Meneses

José Armando Gutiérrez Araujo

GEMILLE ADASSI VAZQUEZ ESTRADA

Reinaldo Mendoza

Diego Reyes Cabrera

Juan Pablo Cadena Bahos

Anfernee Valera

Joalbert Milano

Saul Vega Ramirez

Kevin Salazar

Javier Guevara

Héctor Eduardo López Carballo

Jose Alberto Reyes Quevedo

Camilo Perilla

Jonathan Galimberti

Introducción a Webpack

Curso Avanzado de Webpack para Producción Web

Configuración y uso de Webpack para proyectos JavaScript modernos

Proyecto inicial

Configuración y Uso de Webpack en Proyectos JavaScript

Optimización de Proyectos Web con Webpack para Producción

Configuración básica de Webpack para proyectos JavaScript

Loaders y Plugins en Webpack

Integración de Babel y Webpack para compatibilidad JavaScript

Configuración de HTML-webpack-plugin en Webpack

Configuración de Webpack para CSS y Preprocesadores

Uso de Copy Webpack Plugin para Mover Archivos en Proyectos Node.js

Importación de Imágenes con Webpack Asset Module

Optimización de Fuentes Locales con Webpack

Optimización de Proyectos con Webpack: Minificación y Hashing

Alias en Webpack: Simplifica la Importación de Módulos

Deploy del proyecto

Variables de Entorno en Webpack para Proyectos Seguros

Configuración de Webpack para Modo Desarrollo

Configuración de Webpack para Producción y Limpieza de Builds

Activar Watch Mode en Webpack para Desarrollo y Producción

Despliegue de Proyectos Web con Netlify y GitHub

Herramientas de desarrollo complementarias

Configuración de Webpack Dev Server para Desarrollo Local

Análisis de Dependencias con WebPath Bundle Analyzer

Uso de Source Maps en Webpack para Depuración de Código

Integración básica de React.js

Configuración de Webpack y React desde Cero para Producción

Configuración de Webpack en Proyecto React con Babel y JSX

Configuración de Webpack para Proyectos HTML y Servidor Local

Configurar CSS y SaaS en React con Webpack

Configuración de Webpack para Producción en React

Despliegue de Aplicaciones React en Netlify

Próximos pasos

Configuración y Uso de Webpack con React

Configurar CSS y SaaS en React con Webpack