El CSS no se actualiza en el navegador cuando lo cambio

Sé que esta publicación tiene más de un año, pero pensé en mencionar que CloudFlare almacena en caché archivos estáticos como css, js e imágenes para ayudar a tiempos de carga más rápidos. Algo que me tomó horas descubrir, ya que tenía problemas con los cambios en mi css que no se reflejaban al recargar. CloudFlare tiene un modo de desarrollo que puedes activar por 3 horas. Si olvidas activarlo antes de comenzar a hacer modificaciones, puedes purgar la caché desde la administración de CloudFlare.

Yo también tuve este problema e intenté la solución más votada aquí pero no funcionó. Puedes hacer trucos simples como hice yo.

Sobrescribe el CSS que quieras cambiar en Apariencia > Personalizar > CSS personalizado en tu panel de control.

Eventualmente el CSS se actualizará. Entonces podrás eliminarlo nuevamente.

Por favor cambia la versión en la parte superior del archivo style.css (ubicado en ..wp-content\themes\nombre_del_tema\style.css) a una más nueva.

/*
Theme Name: SF TEST
Version: 1.0.1
*/

Por ejemplo, cambia de 1.0 a 1.1 ó 1.0.1.

Además, cambia la versión en el archivo function.php para ese archivo CSS

wp_enqueue_style('style', get_template_directory_uri() . "/assets/css/style.css", array(), '1.0', 'all');

Aquí cambia '1.0' a una versión más nueva como '1.1'

Es posible que tu proveedor de alojamiento esté utilizando algo como Varnish para almacenar en caché la salida de tu sitio. Me encontré con esto en el sitio de un cliente alojado en una cuenta de hosting compartido de bajo costo. El único remedio que encontré fue tener paciencia.

Si estás usando un tema hijo, es posible que necesites encolar la hoja de estilos del tema hijo para ver los cambios inmediatamente. Esto resolvió mi problema.

Solo quiero señalar - asegúrate de tener en cuenta cualquier plugin de caché que tengas instalado. WP Fastest Cache, por ejemplo, puede crear este problema si no recuerdas iniciar sesión en el panel de WordPress y hacer clic en "Limpiar caché --> Borrar caché y CSS/JS minificados" en el menú de navegación superior.

Esto puede ser antiguo. Pero necesito ayudar a alguien que pueda estar buscando asistencia. Tuve el mismo problema y revisé mis plugins. Había un plugin llamado "W3 Total Cache" que acelera la carga. Es un plugin de caché del lado del servidor, así que lo desactivé. Los cambios en el CSS se volvieron visibles nuevamente en tiempo real. Hay muchos plugins para mejorar la velocidad de carga. Así que revisa tu lista de plugins y desactívalos hasta que termines el desarrollo.

Modifica esto según tus necesidades, funciona de maravilla, genera un número de versión aleatorio cada vez que recargas la página, perfecto para desarrollo:

wp_enqueue_style('mypluginstyle',  plugins_url('/assets/mystyle.css', __FILE__), array(), rand(111,9999) );

Sé que esta pregunta ya tiene una respuesta aceptada que funciona bien, pero quería mencionar otra solución que es un poco más simple.

Al encolar, usa la función PHP time() para obtener la hora actual y usarla como versión. Tu encolado se verá así:

wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/style.css', array(), time() );

Y si estás cargando la hoja de estilos con HTML, tu código se verá así:

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri ?>/style.css?ver=<?php echo time() ?>">

No estoy seguro de por qué nadie ha compartido esta solución. Obtienes una marca de tiempo Unix de la última modificación del archivo, por lo que si no realizaste cambios, el navegador o la caché de CDN pueden mantenerse.

wp_enqueue_style(
    'style_name', // Nombre de la hoja de estilos.
    get_stylesheet_directory_uri() . '/style.css', // URL completa de la hoja de estilos.
    array(), // Dependencias.
    filemtime( get_stylesheet_directory() . '/style.css' ) // Número de versión.
);

La distinción importante aquí es que estás llamando a la URI para la fuente, pero a la ubicación de la carpeta para la hora de modificación del archivo.

Se encuentra en la Configuración de Privacidad del navegador que estás utilizando. Solo debes desactivar la sección que dice:

Precargar páginas para una navegación y búsqueda más rápida Utiliza cookies para recordar tus preferencias, incluso si no visitas esas páginas