42 votes

cbmeeks avatar

Pourquoi mes ensembles de styles ne s'affichent-ils pas correctement dans ASP.NET MVC 4?

Demandé el 21 de Septembre, 2012
Quand la question a-t-elle été
24719 affichage
Nombre de visites la question a
4 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Je suis donc de nouveau à ASP.NET MVC 4 (eh bien, j'ai utilisé 3 un peu).

De toute façon, dans mon BundleConfig.cs fichier, je suis en train de charger le Twitter Bootstrap css fichiers et un autre site.css le fichier.

Mais seul le site.le fichier css est rendu. J'ai confirmé que le bootstrap, fichiers css sont en effet au bon endroit (dossier de Contenu) et sont dans le même emplacement que le site.css

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.min.css",
            "~/Content/bootstrap-responsive.min.css",
            "~/Content/site.css"));

MODIFIER

OK, ce n'est pas ma préférée, mais Andrei Drynov m'a recommandé d'essayer:

@import url("bootstrap.min.css")
body{background: #e8e6da;padding-top:60px;padding-bottom:40px;}
@import url("bootstrap-responsive.min.css")

Mais cela ne fonctionne pas. J'ai changé le site.css à la ci-dessus, mais maintenant l'arrière-plan la couleur du corps ne fonctionne même pas. Si je supprime le @importations de l'arrière-plan est la bonne couleur.

EDIT 2

Je n'ai pas l'obtenir, mais en ajoutant:

bundles.IgnoreList.Clear();

Pour ma bundles fichier corrigé. Hmmm. Pas sûr que je comprends. Mais j'ai été en mesure de supprimer l' @importations du site.css.

Étrange.

Demandé el 21 de Septembre, 2012 par cbmeeks

Réponses

Trop de publicités?

87voto

paul avatar
paul Points 9867

Le comportement par défaut consiste pour IgnoreList à ignorer les scripts minifiés.

Vous pouvez supprimer le '.min' de leurs noms ou effacer IgnoreList.

Répondu el 25 de Novembre, 2012 par paul (9867 Points )

15voto

Steve Johnson avatar
Steve Johnson Points 1073

Juste pour que quelqu'un d'autre qui ne peux pas trouver une solution qui fonctionne facilement dans ce long fil, j'ai eu exactement le même problème et je l'ai résolu de la même manière comme il est suggéré dans les éditions qui se trouve au bas de la réelle question!

J'ai commencé un nouveau projet MVC4 Application Web, itinéraires créés pour bootstrap faisceaux dans le même code ci-dessus:

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.min.css",
            "~/Content/bootstrap-responsive.min.css",
            "~/Content/site.css"));

Mais à cause de raisons inconnues, il n'était pas le chargement.. Enfin, j'ai abandonné et a décidé de google et trouvé cette page.

J'ai essayé d'ajouter les éléments suivants à la première ligne BundleConfig.cs fichier. Recompilé et tout a commencé à travailler, et maintenant, les styles ont été correctement chargé à maintenant.

bundles.IgnoreList.Clear();

Peut-être que cela aide quelqu'un.

Répondu el 9 de Février, 2013 par Steve Johnson (1073 Points )

2voto

AFD avatar
AFD Points 2736

Je n'utilise pas les bundles pour Bootstrap (à titre d'exception), mais ses versions minifiées, donc cela fonctionne pour moi: 

 <!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>@ViewBag.Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="@Url.Content("~/Content/bootstrap.min.css")">
    <style>
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
    </style>
    <link rel="stylesheet" href="@Url.Content("~/Content/bootstrap-responsive.min.css")">
    @Styles.Render("~/Content/less")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>

La partie avec le style en ligne provient de http://www.initializr.com/ pour la barre de navigation supérieure. Si vous n'en avez pas besoin, supprimez-la.

Alternativement, vous pouvez faire la même chose dans votre fichier styles.css: 

 @import url('bootstrap.min.css');

body {
    padding-top: 60px;
    padding-bottom: 40px;
}

@import url('bootstrap-responsive.min.css');

You CSS Code below
Répondu el 21 de Septembre, 2012 par AFD (2736 Points )

1voto

FredericoR avatar
FredericoR Points 21

Comme Paul l'a indiqué correctement, les ensembles configurés pour ignorer automatiquement les fichiers "min". Mais ignorer cette règle dans son ensemble est une mauvaise pratique. Veuillez vous référer à cette réponse. Bundler n'inclut pas les fichiers .min pour une meilleure solution (vérifiez les première et deuxième réponses).

Répondu el 31 de Décembre, 2013 par FredericoR (21 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X