Estilizar componentes con CSS Modules

Clase 32 de 58 • Curso Profesional de React con Redux 2016

Resumen

Agregar a estilos a los componentes

npm i -D css-loader style-loader extract-text-webpack-plugin

Juan Castro

teacher•

Para poder escribir sus estilos con stylus, sass, less o incluso postcss, solo tienen que instalar el paquete stylus-loader o sass-loader, etc y en el archivo webpack.config.server.js y webpack.config.client.js editar la siguiente linea:

loader: ExtractTextPlugin.extract('style', 'css?modules')

Y agregar: !stylus-loader

loader: ExtractTextPlugin.extract('style', 'css?modules!stylus-loader')

Sergio Daniel Xalambrí

student•

Para PostCSS no deberías tener que hacer nada ya que el css-loader usa internamente PostCSS, sería configurarlo y nada más.

Juan Castro

teacher•

Super!

Diego Antonio Gomez Diaz

student•

Parece ser que webpack se actualizo a la version 2.2.1 el cual maneja una nueva sintaxis y me esta dando problemas al momento de migrar:

Este el codigo de webpack.server.config

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
	entry: './source/server.js',
	output: {
		filename: 'index.js',
		path: './built/server'
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				exclude: /node_modules/,
				use: ExtractTextPlugin.extract({
					fallback: "style-loader", // Will inject the style tag if plugin fails
					use: "css-loader",
				}),
			},
			{
				test: /\.jsx?$/,
				use: 'babel-loader',
				exclude: /(node_modules)/,
				query: {
					presets: ['latest-minimal', 'react']
				}
			},
		],
	},
	target: 'node',
	plugins: [
		new ExtractTextPlugin({ filename: '../statics/styles.css', disable: false, allChunks: false })
	],
};

Pero el ejecutar el comando webpack -w se muestra el siguiente error:

Error: options/query provided without loader (use loader + options) in {
“test”: {},
“use”: “babel-loader”,
“exclude”: {},
“query”: {
“presets”: [
“latest-minimal”,
“react”
]
}
}

Alguien a tenido el mismo problema?

Diego Antonio Gomez Diaz

student•

Problema solucionado si alguien mas le pasa tuve que instalar la version beta de extract-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin@beta

npm install --save-dev extract-text-webpack-plugin@beta

Y este codigo de webpack.server.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
	entry: './source/server.js',
	output: {
		filename: 'index.js',
		path: './built/server'
	},
	module: {
		rules: [
			{
				test: /\.jsx?$/,
				loader: 'babel-loader',
				exclude: /(node_modules)/,
				query: {
					presets: ['latest-minimal', 'react']
				},
			},
			{
				test: /\.css$/,
				exclude: /node_modules/,
				use: ExtractTextPlugin.extract({
		        	fallback: 'style-loader',
		          	use: 'css-loader!modules',
		        }),
			},			
		],
	},
	target: 'node',
	plugins: [
		new ExtractTextPlugin({ filename: '../statics/styles.css' }),
	],
};

Y este codigo de webpack.client.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
	entry: './source/client.js',
	output: {
		filename: 'app.js',
		path: './built/statics'
	},
	module: {
		rules: [
			{
				test: /\.jsx?$/,
				loader: 'babel-loader',
				exclude: /(node_modules)/,
				query: {
					presets: ['es2016','es2017', 'react'],
					plugins: ['transform-es2015-modules-commonjs'],
				},
			},
			{
				test: /\.css$/,
				exclude: /node_modules/,
				use: ExtractTextPlugin.extract({
		        	fallback: 'style-loader',
		          	use: 'css-loader!modules',
		        }),
			},
		],
	},
	target: 'web',
	plugins: [
		new ExtractTextPlugin({ filename: '../statics/styles.css' }),
	],
};

Espero que ayude a otros.

Saludos

Diego Antonio Gomez Diaz

student•

Cambien esta linea de codigo

use: 'css-loader!modules',

por esta

use: 'css-loader?modules',

Juan Castro

teacher•

En Platzi usan css-modules?

Sergio Daniel Xalambrí

student•

No usamos CSS Modules para generar los nombres de clases usando hashes, pero sí estilizamos por componente de forma similar a CSS Modules además de usar Component CSS como nomenclatura para nombrar clases.

Juan Castro

teacher•

Me recomiendan usar css-modules, o react-css-modules?

He visto que react-css-modues tiene ventajas por ejemplo que no hay lio en poner mas de una clase, y se ponen como estilos normales, no como props…

Sergio Daniel Xalambrí

student•

Nunca lo use, pero compara esto:

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './App.css';

function App() {
	return (
		<div styleName="App">
			hola mundo
		</div>
	);
}

export default CSSModules(App, styles);

Así se usa react-css-modules, requiere agregar otro import y aplicar un HOC a cada componente estilizado.

import React from 'react';
import styles from './App.css';

function App() {
	return (
		<div className={styles.App}>
			hola mundo
		</div>
	);
}

export default App;

Así funciona CSS Modules normal, simplemente importas los estilos y los aplicas con el prop className.

No te parece más simple usar la forma común que agregar otro import y un HOC? Si te parece que react-css-modules trae suficientes ventajas como para importar otra librería y agregar un HOC, entonces genial, usalo ya que te va a funcionar sin problemas.

También esta la opción de usar babel-plugin-react-css-modules que te evita el import y el HOC, en ese caso si tiene sentido, pero te toca agregar otro plugin Babel.

Como vez, todo tiene un costo, es cuestión de decidir si ese costo te parece que vale la pena a cambio de las ventajas que ofrece, si te parece que lo vale, adelante 😃

Juan Castro

teacher•

Genial explicación, muy completa! Gracias! 😄

Que tan recomendado es usar CSS Modules y no solo una hoja de estilos (puede ser por ejemplo con Sass Less Stylus etc)? A mi se me complico que por ejemplo para darle estilos al body, o a todos los h1 de la aplicación, jeje no pude, a menos que le pusiera la clase al body, y a todos los h1…

Si este es el costo de user CSSModules, vale la pena usarlos?

Markoz Peña Mendez

student•

@Sergio tengo una duda sencilla

Dentro de la carpeta shared esta una sub carpeta que se llama components

¿ahi debo de almacenar todo mi css y componentes HTML?

Muchas gracias por todo Sergio 😄

Sergio Daniel Xalambrí

student•

Nunca usas HTML, nunca, solo componentes de React. En shared van componentes compartidos entre todos los features de tu aplicación, esto incluye su JSX y su CSS.

Markoz Peña Mendez

student•

Gracias Sergio 😄

Henry Tabima Giraldo

student•

si se usa styled-components fuera de next hay que añadir alguna configuración especial? @sergiodxa

Sergio Daniel Xalambrí

student•

No, simplemente usarlo y styled-components hace que funcione, de hecho Next no trae integrado styled-components, así que es lo mismo con o sin Next 😃

Simón Ottoniel González Acosta

student•

Hola muchachos queria aportar con una actualizacion en los archivos de configuracion del webpack cliente y servidor en el que se coloca ‘style-loader’ y ‘css-loader?modules’ actualizado a la fecha. Gracias sergio muy buen curso.

webpack.server.config.js

<code>
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './source/server.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, '../built/server'),
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/,
        query: {
          presets: ['latest-minimal', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?modules'
        })
      }
    ]
  },
  target: 'node',
  plugins: [
    new ExtractTextPlugin('../statics/styles.css')
  ]
}
</code>

webpack.client.config.js

<code>
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './source/client.js',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../built/statics'),
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/,
        query: {
          presets: ['es2016', 'es2017', 'react'],
          plugins: ['transform-es2015-modules-commonjs']
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?modules'
        })
      }
    ]
  },
  target: 'web',
  plugins: [
    new ExtractTextPlugin('../statics/styles.css')
  ]
}
</code>

Simón Ottoniel González Acosta

student•

ignoren las etiquetas <code></code> jejeje soy nuevo

Abraham Solorzano

student•

Que tal team.

Acá les dejo como configuré mi webpack en la versión ^3.7.1 y el plugins “extract-text-webpack-plugin”: “^3.0.1” en mi proyecto.

Espero les ayude!

webpack/webpack.client.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');




module.exports = {
  entry: './src/client.js',
  output: {
    filename: 'app.js',
    path:path.resolve(__dirname, '../build/static')
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/,
        query: {
          presets: ['es2016', 'es2017', 'react'],
          plugins: ['transform-es2015-modules-commonjs']
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?modules'
        })
      }
    ]
  },
  target: 'web',
  plugins: [
    new ExtractTextPlugin({ filename: '../static/styles.css' }),
  ],
}

webpack/webpack.server.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
  entry: './src/server.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, '../build/server')
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /(node_module)/,
        query: {
          presets:['latest-minimal', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?modules'
        })
      }
    ]
  },
  target: 'node',
  plugins: [
    new ExtractTextPlugin({filename:'../build/static/styles.css'}),
  ],
}

Pablo Angel

student•

Tengo una duda, esta bien si un tiene una aplicación one page, toda con react o solo usar componentes insertados una vez cargada algo de data.

Diego Forero

Team Platzi•

Puedes tener todo con react, no hay problema, solo es necesario verificar rendimiento y si es bueno no hay problema.

Miguel Armando Alejandre Montemayor

student•

@sergiodxa ¿Alguna forma de integrar “foundation 6” con la app?

Sergio Daniel Xalambrí

student•

Cargas el CSS en un link y usas las clases de foundation en tus componentes.

Miguel Armando Alejandre Montemayor

student•

¿Te refieres a un CDN?

Daniel Masegosa Fernández-Berm

student•

Buenas, estoy teniendo el siguiente problema por si alguien pudiera ayudar, tras dudar en la configuración de webpack puesto que he instalado la versión 2, he conseguido empaquetar los estilos en nuestro archivo styles.css, me lo reconoce del servidor de estaticos, pero no me enlaza el className con el Hash _3WPHw-EQIKAg90iPBJQQdD a la clase css generada en style.css

He enlazado en Layout.jsx pero no me cargan los estilos en el header.

Luis Alfredo Locon Peña

student•

tengo un problema al correr webpack -w despues de cargar los loaders y extract-text-webpack-plugin

me sale esto en la consola

chunk.sortModules();
                  ^

TypeError: chunk.sortModules is not a function

ayuda pls

Luis Alfredo Locon Peña

student•

resuelto en la version 3 de webpack!

Miguel Angel Gatto

student•

Me dio ese error con la v 3.0.0, actualicé a la v 3.3.0 con el comando npm install --save-dev webpack y se me actualizó ese solo. Sino existe el comando update que lo que no hace es cambiar de major release, o sea va a subir a la 3.5 y hasta la 3.99 pero no a la 4.0.

Hector Jose Flores Colmenarez

student•

Por alguna razon al tratar de ver el import del css haciendole un console.log(styles) este me devuelve {} por lo cual no me estan cargando los estilos, investigue un poco puesto a que han habido cambios en webpack usando css-loader, style-loader colocando esto

CLIENTE

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: './source/client.js',
  output: {
    filename: 'app.js',
    path: './built/statics',
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/,
        query: {
          presets: ['es2016', 'es2017', 'react'],
          plugins: ['transform-es2015-modules-commonjs'],
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
      }
    ]
  },
  target: 'web',
  plugins: [
    new ExtractTextPlugin('../statics/styles.css'),
  ]
}

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: './source/server.js',
  output: {
    filename: 'index.js',
    path: './built/server',
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/,
        query: {
          presets: ['latest-minimal', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
      }
    ]
  },
  target: 'node',
  plugins: [
    new ExtractTextPlugin('../statics/styles.css'),
  ]
}

Cambie los archivos de webpack a esta forma y no me funciona, alguien ha tenido el mismo problema ? La unica forma de que me aparezcan los estilos es que en el className="" coloque el nombre del estilo en string y no proveniendo del import styles.

Sergio Daniel Xalambrí

student•

El CSS se exporta a un archivo .css separado, no deberías ver nada en el import desde el código. No está generando el archivo?

Hector Jose Flores Colmenarez

student•

Si lo genera, pero debo declarar la clase className=“header” porque si pongo esto className={styles.header} el objeto no tiene nada y no coloca la clase

Mauricio Cano

student•

No entiendo porque Webpack no me está generando los estilos 😦, hago todo lo del video y no me funciona. Aquí mi código, cualquier ayuda bienvenida. De antemano gracias:

WEBPACK (La parte importante)

const ExtractTextPlugin = require('extract-text-webpack-plugin')
...
{
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?modules' })
      }
...
target: 'web',
  plugins: [
    new ExtractTextPlugin('../statics/styles.css')
  ],

Header.jsx

import React from 'react'
import { Link } from 'react-router'

import styles from './Header.css'

function Header() {
  return (
    <header className={styles.header}>
      <h1>
        Mi primera app en react
      </h1>
      <nav role="navigation">
      </nav>
    </header>
  )
}

export default Header

Armando de jesus santiz lopez

student•

Porque hay que agregar el plugin que extrae el CSS tanto en el bundle del servidor y cliente ? Eso no genera dos veces el mismo Styles.css ?

Sergio Daniel Xalambrí

student•

Si no lo extraes entonces vas a tener un error al hacer el render en el servidor.

Igual en un material bonus vemos como evitar que webpack genere un archivo CSS durante el build del servidor.

Miguel Carmona Cantillo

student•

Como podria implementar hot reload al proyecto?

Miguel Carmona Cantillo

student•

¿Como configuro webpack para importar imagenes? uso file-loader pero React me da:
Warning: React attempted to reuse markup in a container but the checksum was invalid.

Sergio Daniel Xalambrí

student•

Tenés que agregar el file-loader tanto en la configuración del servidor como del navegador para que así Webpack coloque la URL tanto en el render del servidor como en el del navegador y en ambos casos se renderice lo mismo.

Daniel Andres Espinosa Gomez

student•

hola. como seria si quiero usar frameworks de css como Boostrap o Matrialize.

Sergio Daniel Xalambrí

student•

Simplemente carga el CSS desde un link en el head (lo agregas en Layout.jsx) y luego usas las clases de Bootstrap o Foundation donde las necesites.

También existen opciones como react-bootstrap que te da componentes que ya aplican los estilos y las funcionalidades como los modales o el dropdown y hechos con React en vez de jQuery.

Elias Ortega Ortega Ortega

student•

Que sucede si en la configuración de webpack en el servidor no agregamos la configuración para el estilizar?

Sergio Daniel Xalambrí

student•

La mejor forma de resolver las preguntas de “qué sucede si” es probando y viendo que pasa 😃

Ahora lo que va a ocurrir es que cuando se haga se va romper ya que Node.js por defecto no sabe como manejar archivos CSS.

Mauricio Cano

student•

Buenos días, estoy recibiendo este error:

SyntaxError: /Users/macpro/Documents/lisa_project/pos_lisa-react/src/shared/components/Header.css: Unexpected token (1:0)
> 1 | .header {
    | ^
  2 |   background: linear-gradient(90deg, #1c3643 0, #273b46 25%, #1e5372);
  3 | }
    at Parser.pp$5.raise (/Users/macpro/Documents/lisa_project/pos_lisa-react/node_modules/babylon/lib/index.js:4373:13)
    at Parser.pp.unexpected (/Users/macpro/Documents/lisa_project/pos_lisa-react/node_modules/babylon/lib/index.js:1716:8)
    at Parser.pp$3.parseExprAtom (/Users/macpro/Documents/lisa_project/pos_lisa-react/node_modules/babylon/lib/index.js:3683:12)
    at Parser.parseExprAtom (/Users/macpro/Documents/lisa_project/pos_lisa-react/node_modules/babylon/lib/index.js:7016:22)
    at Parser.pp$3.parseExprSubscripts (/Users/macpro/Documents/lisa_project/pos_lisa-react/node_modules/babylon/lib/index.js:3427:19)
    at Parser.pp$3.parseMaybeUnary (/Users/macpro/Documents/lisa_project/pos_lisa-react/node_modules/babylon/lib/index.js:3407:19)
    at Parser.pp$3.parseExprOps (/Users/macpro/Documents/lisa_project/pos_lisa-react/node_modules/babylon/lib/index.js:3337:19)
    at Parser.pp$3.parseMaybeConditional (/Users/macpro/Documents/lisa_project/pos_lisa-react/node_modules/babylon/lib/index.js:3314:19)
    at Parser.pp$3.parseMaybeAssign (/Users/macpro/Documents/lisa_project/pos_lisa-react/node_modules/babylon/lib/index.js:3277:19)
    at Parser.parseMaybeAssign (/Users/macpro/Documents/lisa_project/pos_lisa-react/node_modules/babylon/lib/index.js:6242:20)

He visto el video y tengo todo configurado bien, que tengo en el olvido? De antemano muchas gracias

Daniel Aguirre Linar Alejandro

student•

Lo resolvi con la sigiuente configuracion al parecer el plugin cambio la configuracion cuando se actualizo

{
        test: /\.css$/,
        loader:  extractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }

Estilizar componentes con CSS Modules

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React

Actualizando a la última versión de React Router

Desafíos

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Implementar Redux en perfíl de usuario y detalle de un post

Cargar datos iniciales en el servidor

Desafío especial

Contenido bonus

Glosario

Evitar que webpack genere el CSS durante el build del servidor

LazyLoad de imágenes

Animaciones con ReactCSSTransitionGroup

Server render con Next.js

Aplicaciones universales/isomórficas

Iniciar proyectos con create-react-app

Diplomado de desarrollo de aplicaciones con ReactJS