Configurar CSS y SaaS en React con Webpack

Resumen

¿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!

Fernando Quinteros Gutierrez

student•

⬇ Instalación de dependencias

#NPM
npm install -D mini-css-extract-plugin css-loader style-loader sass sass-loader
# YARN
yarn add -D mini-css-extract-plugin css-loader style-loader sass sass-loader

Felix Torres Javier Antonio

student•

gracias bro!

Nicolas Mauricio Cuadrado Avila

student•

No se si alguién ha tenido el problema, pero la expresión regular toma o scss o sass pero nunca css:

Si se pasa de:

/\.s[ac]ss/

/\.s?[ac]ss/

También se cargarán archivos .css, tuve ese error en un proyecto personal.

Saludos!

Hernán David Mercado Fernández

student•

Yo lo implementé de esta forma y también me funcionó

/\.(css|scss)$/

Erwin Frias

student•

Hola Nicolas,

Te comento que también puedes agregar esa regla de la siguiente manera:

test: /\.(sa|sc|c)ss$/i

#NuncaParesDeAprender 💚🤓

Jhean Pacheco

student•

mini-css-extract-plugin tambien tiene un laoder incorporado y a mi parecer es mejor usarlo para reducir el número de dependencias en el proyecto.

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

Carlos Restrepo

student•

A mi me pasó que con el style-loador estaba creando una carpeta "dist" dentro de la carpeta src/styles y ahí guardaba el css compilado de webpack, en vez de guardarlo en la carpeta /dist del proyecto... eso no me gustó y por eso seguí tu consejo, teniendo más control sobre la carpeta donde se guarda ese css

Alonso Fabricio Samanez Nuñez

student•

:thumbsup:

Juan Jose Hernandez Garcia

student•

es importante que pongan primero el css loader y después el sass loader porque si no les dará error :V(me pasó)

Andres Prieto

student•

De hecho, no es solo el css loader; tambien el style loader; si pones:

'css-loader',
'sass-loader',
'style-loader'

También falla, tiene que ser exactamente como está en el ejemplo XD

Rodrigo Rodriguez

student•

Al hacer npm run start y ver la pagina , note que no cargaba el color de fondo definido en scss,

mire el trabajo del portfolio y vi que en el webpack.config.js

haciamos asi en la seccion de rules:

use: [ MiniCssExtractPlugin.loader , 'css-loader', 'sass-loader' ]

en lugar de solo:

use: [ 'css-loader', 'sass-loader' ]

y funciono, se aplican los estilos.

Jonh Pertuz pertuz

student•

me salvaste dure para encontrar el problema

Lautaro Bustos

student•

No te funcionaba porque te faltaba style-loader que inyecta css en el html en un tag <style></style>. Deberias haber hecho esto:

use: [
'style-loader', 'css-loader’, ‘sass-loader’
]

En cambio, MiniCssExtractPlugin.loader lo que hace es create un archivo e inyectarlo en el html como un <link/>

Giusseppe Pérez Mendoza

student•

al compilar npm run start, me mostraba el siguiente error:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".

lo solucione solo quitando el style-loader del webpack.config y quedo asi

{
                test: /\.s[ac]ss$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader",
                    // "style-loader",
                ]
            }

Oscar Fuentes Esteves

student•

Igual me pasó a mi, creo que debe actualizarse el curso.

Cindy Carolina Campos Navarro

student•

gracias, gracias, gracias!!!

Christian Boffill

student•

Si usan style-loader los estilos van a estar en el <head> del index.html de la salida( carpeta dist ) pero todos dentro de una etiqueta <script> y todos sabemos que no siempre es lo mejor. Yo prefiero usar MiniCssExtractPlugin.loader en lugar de style-loader. Me ahorro una instalación, menos peso para mi bundle y voy a tener los estilos en una etiqueta <link> a la salida, haciendo referencia a un archivo CSS separado al html. Mejores prácticas :)

Julian David Alzate Cuervo

student•

sería bueno que actualizaran el curso, he tenido bastantes problemas con la sección de react al tratar de realizar algunas configuraciones

Lucas Aristizábal

student•

8 meses después y nada que actualizan este curso

Santiago Felipe Piedriz Pasos

student•

Estoy de acuerdo contigo, realmente se pierde mucho tiempo buscando solucionar los problemas de incompatibilidad que se presentan.

José Gregorio Estrada Meneses

student•

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

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

José Armando Gutiérrez Araujo

student•

He notado que al usar el style-loader, al momento de ver el código fuente no crea ningún archivo main.css sino que coloca los estilos embebidos en una etiqueta style dentro del html, si queremos que si nos genere nuestro archivo debemos cambiar:

use: [
  'style-loader',
  'css-loader',
  'sass-loader',
]

Por:

use: [
  MiniCssExtractPlugin.loader,
  'css-loader',
  'sass-loader',
]

Y asi ya genera el archivo .css

Lucas Aristizábal

student•

gracias

GEMILLE ADASSI VAZQUEZ ESTRADA

student•

Configuración de Webpack para CSS en React

Instalación de dependencias

#NPM
npm i mini-css-extract-plugin css-loader style-loader sass sass-loader -D

global.scss

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

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

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import "./styles/global.scss";

ReactDOM.render(<App />, document.getElementById('app'));

Webpack.config.js

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: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 3006,
        open: true
    },
}

Oscar Fuentes Esteves

student•

Tuve un problema con el sass-loader, y al usar tu configuración de :

use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]

funcionó, muchas gracias. Al guitar el style-loader funcionó. Saludos.

Reinaldo Mendoza

student•

Ahora ya se porque create-react-app tarda tanto, son como 729 dependencias que debe instalar por debajo para funcionar

María de los Milagros Vilchez

student•

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

student•

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

student•

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

Diego Reyes Cabrera

student•

Algo que el profesor no explicó

El orden de los loaders para una misma regla importan, porque se ejecutan de forma secuencial; desde el último del array, hasta el primero del array. .

Por esto a muchos les ha dado error al no tener el mismo orden que el profesor

El orden que necesitamos para usar estilos de esta forma es:

Procesar el codigo SASS a CSS (sass-loader).
Hacer que el codigo CSS pueda ser interpretado e importado por JavaScript (css-loader).
Inyecta ese CSS de JavaScript al DOM (style-loader).

use: [
		"style-loader", //3.
		"css-loader", //2.
		"sass-loader", //1."
	]

Juan Pablo Cadena Bahos

student•

Aqui hay un articulo sobre la diferencia entre dependencies y devDependencies: https://medium.com/@dylanavery720/npmmmm-1-dev-dependencies-dependencies-8931c2583b0c

Anfernee Valera

student•

Algo importante que destacar. . cuando hacemos uso de style-loader , los estilos se crearan de forma inline, en mi caso generados desde del JS.

Si quieren que se genere su archivo .css, deben utilizar el loader de mini-css-extract-plugin. Su regla quedaría así:

        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },

Joalbert Milano

student•

No encontraba la diferencia entre MiniCssExtractPlugin.loader y el style-loader, buen aporte

Saul Vega Ramirez

student•

el orden de los loaders para css es importante? o pueden ir en cualquier orden, Es decir en el array los coloca: 'style-loader', 'css-loader', 'sass-loader',

Kevin Salazar

student•

Sí claro, el orden no altera el producto.

Diego Reyes Cabrera

student•

Sí altera, acabo de hacer un aporte sobre eso https://platzi.com/comentario/4601403/

Javier Guevara

student•

Me da un error por el loader

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 loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> $base-color: #c6538c;
| $color: rgba(black, 0.88);

Lo he intentado reinstalar pero no lo logro solucionar. Alguna sugerencia?

Héctor Eduardo López Carballo

student•

Hola!

Ya instalaste el loader de scss y lo configuraste en webpack? Podrías compartir tu repositorio o un gist de tu configuración de webpack?

Jose Alberto Reyes Quevedo

student•

Cual es la diferencia de usar el style loader y el mini css extract plugin loader?

Camilo Perilla

student•

El style-loader va a inyectar todo el CSS de tu proyecto en el DOM usando multiples etiquetas <style></style>. Esas etiquetas se colocan en la cabecera de tu archivo html. Con MiniCssExtractPlugin extraes ese mismo CSS a un archivo aparte. Este nuevo archivo .css sera llamado desde el html usando un etiqueta <link>. Algo asi: <link rel="stylesheet" type="text/css" href="styles.css">. Puedes cambiar el nombre del archivo o hacer que sea cargado de forma lazy, para estilos que no sean necesarios en el tipo de dispositivo que el usuario este usando

Jonathan Galimberti

student•

hola, me arrojaba un error en las configuraciones de los loaders y en la pagina de webpack estaba esta actualizacion la cual sirvio a la perfeccion en mi caso.

{
                test: /\.s[ac]ss$/i,
                use: [
                    // [style-loader](/loaders/style-loader)
                    { loader: 'style-loader' },
                    // [css-loader](/loaders/css-loader)
                    {
                      loader: 'css-loader',
                      options: {
                        modules: true
                      }
                    },
                    // [sass-loader](/loaders/sass-loader)
                    { loader: 'sass-loader' },
        ]}