2

Estimados amigos de Stackoverflow, tengo el siguiente problema:

Estoy desarrollando una aplicación ASP.NET MVC 4, la que he subido a un servidor Azure.

El tema es que cuando estoy trabajando de manera local, compilo y corro la aplicación en el servidor local se me ven todos los estilos como corresponde y todo funciona de maravilla, pero cuando subo la aplicación a Azure, no me toma los estilos renderizados.

De ejemplo un botón, tengo una hoja de estilo en la siguiente ruta "~/Tema/pages/css/login-5.min.css" y para cargarla en la página uso @Styles.Render("~/CssTemaLogin"), en el head de la vista (Index.cshtml), pero no me toma el estilo, cuando hago una revisión con chrome, no aparece dentro de las carpetas source y en consola me dice que no encontró el archivo.

Alguien puede tener alguna idea de porque se está produciendo este error?

Este es el código del bundle.Config donde tengo las rutas:

 bundles.Add(new StyleBundle("~/CssTemaLogin").Include(
                    "~/Tema/global/css/components-rounded.min.css",
                    "~/Tema/global/css/plugins.min.css",
                    "~/Tema/global/plugins/select2/css/select2.min.css",
                    "~/Tema/global/plugins/select2/css/select2-bootstrap.min.css",
                    "~/Tema/pages/css/login-5.min.css"
                ));
4
  • la carpeta "Tema" existe y está incluida en el proyecto?
    – fredyfx
    Commented el 20 mar. 2017 a las 23:14
  • Si la carpeta tema existe y esta incluida en el proyecto. Saludos. Commented el 21 mar. 2017 a las 14:52
  • En tu App start llamas a bundles. Config?
    – fredyfx
    Commented el 21 mar. 2017 a las 15:01
  • Los bundles se redenderizan en las vistas, de hecho se crean para no llamar a todos los script y css en todas las paginas y solo llamar al grupo que necesitas para esa vista. Commented el 21 mar. 2017 a las 20:03

3 respuestas 3

2

Estimados, dejo esta información después de dos semanas de darme contra el teclado he encontrado por qué no se visualizaban las imágenes de las clases css que se renderizaban con Style.Bundle respondo a mi pregunta para que en caso de que alguien más se encuentre con este problema, pueda resolverlo.

Lo primero fue entender como funciona esa clase que renderiza tus css a través de la funcion Include. Lo que hace esta función es crear un css con todos los archivos que tu le entregas. Es decir, si tengo:

bundles.Add(new StyleBundle("~/CssTemaLogin").Include(
        "~/Tema/global/css/components-style-1.min.css",
        "~/Tema/global/css/components-style-2.min.css",
        "~/Tema/global/css/components-style-3.min.css",
        "~/Tema/global/css/components-style-4.min.css"
        ));

En el servidor se me creará un documento de estilo en la ruta raíz y se llamará "CssTemaLogin", ahora el problema de rutas se genera cuando uno de los archivos .css que incluí en el bundles, hace referencia a una imagen, ya que esa propiedad, dejará de estar en path que se menciona en el Include y pasará a estar en la raíz, o donde le indiquemos al StyleBundle que se posicione. Un ejemplo para dejar esto mas claro, si tenemos lo siguiente en el documento "~/Tema/global/css/components-style-1.min.css":

cabecera {
          background-image: url("../images/cabecera.jpg");
}

Lo que vemos arriba es una clase css, que le esta indicando al archivo que debe salir un nivel y entrar a la carpeta images y seleccionar la imagen cabecera.jpg Si nos fijamos en la posición de la hoja de estilo "~/Tema/global/css/components-style-1.min.css", le esta diciendo que salga de la carpeta css y entre a la carpeta images, sin embargo y aquí es donde se genera el problema, cuando esa misma hoja de estilo forma parte de un StyleBundle, deja de encontrarse en el path que menciona el archivo, es decir, intentará subir un nivel desde donde se encuentra el archivo css, que como dijimos antes al ser incluido al StyleBundle ahora estará en la raíz del servidor y no en la ruta que se especifica dentro del documento css y no encontrará la imagen.

La solución: Cambiar las url de las imagenes entregandoles todo el path, de esta manera en vez de verse asi:

cabecera {
          background-image: url("../images/cabecera.jpg");
}

se verá así:

cabecera {
          background-image: url("Tema/global/images/cabecera.jpg");
}

Espero que esta solución ayude a alguien más y espero haber sido claro con mi explicación.

Saludos y gracias a todos los que me ayudaron con esta pregunta.

2
  • me alegra que hayas resuelto tu problema, una vez me pasó que en esa url del css, le quité los puntos seguidos ".." y de acuerdo a la estructura de carpetas que tenía, funcionó sin problemas. Saludos :D
    – fredyfx
    Commented el 28 mar. 2017 a las 17:25
  • Fue realmente y literalmente un parto... pero lo bueno es que ya se solucionó. Gracias por el aporte (Y) Commented el 28 mar. 2017 a las 18:31
1

Intenta cambiar el nombre del bundle a uno con un prefijo de ruta distinto a raíz. Por ejemplo:

bundles.Add(new StyleBundle("~/bundles/CssTemaLogin").Include(
            "~/Tema/global/css/components-rounded.min.css",
            ... ));

Probablemente el error se debe a que se requiere indicar una ruta virtual, en vez de una ruta real del servidor. En producción dicha ruta servirá los archivos minificados y combinados incluidos en el bundle. En modo debug, el sistema servirá los archivos separados desde sus ubicaciones originales, y por eso tienes un comportamiento correcto.

Es recomendable hacer lo mismo con los demás bundles de tu aplicación. Obviamente deberás cambiar el código que inyecta los bundles en tus vistas para reflejar dicho cambio.

2
  • Muchas gracias estimadisimo, aún no he tenido el tiempo de hacer el cambio para ver si funciona, pero agradezco mucho su interés por mi pregunta. En cuanto pueda probar le haré saber si la sugerencia que me hizo logró tener resultados. Saludos! Commented el 20 mar. 2017 a las 22:45
  • Estimado probé hacerlo como me dijo pero aun así no me encuentra los archivos y me responde con error 404, de todas maneras, gracias por el interés en la pregunta. Saludos. Commented el 21 mar. 2017 a las 14:53
1

Algo que me ha pasado con esto es que el servidor decide ignorar los archivos .min.*, supongo que en aras de hacer la minificación por su cuenta. Trata renombrando esos .min o subiendo los originales y activando la minificación en el servidor con:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(…);
   … 
    BundleTable.EnableOptimizations = true;
}
1
  • En cuanto pueda, haré la prueba que me sugiere y le estaré comentando. Saludos!. Commented el 20 mar. 2017 a las 22:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.