Je me demande ce que je ne fais pas correctement ici. J'utilise ASP.NET C # MVC4 et je souhaite utiliser la nouvelle fonctionnalité d'optimisation css/js.
Voici ma partie HTML
@Styles.Render("~/content/css")
Voici ma partie BunduleConfig.cs
bundles.Add(new StyleBundle("~/content/css").Include(
"~/content/css/reset.css",
"~/content/css/bla.css"));
// BundleTable.EnableOptimizations = true;
Sortie (travaux):
<link href="/content/css/reset.css" rel="stylesheet"/>
<link href="/content/css/bla.css" rel="stylesheet"/>
Cependant, lorsque je ne commente pas BundleTable.EnableOptimizations = true;
, la sortie html ressemble à ceci
<link href="/content/css?v=5LoJebKvQJIN-fKjKYCg_ccvmBC_LF91jBasIpwtUcY1" rel="stylesheet"/>
Et c’est bien sûr 404 ans. Je ne sais pas du tout où j’ai fait quelque chose de mal, aidez-moi, travaillez pour la première fois avec MVC4.
J'imagine que le problème est que vous placez le paquet sur une URL virtuelle qui existe, mais qui est un répertoire.
MVC crée un fichier virtuel à partir de votre bundle et le diffuse à partir du chemin que vous spécifiez comme chemin du bundle.
La solution correcte à ce problème consiste à utiliser un chemin d'ensemble qui ne mappe pas directement vers un répertoire existant, mais utilise plutôt un nom de fichier virtuel (qui ne mappe pas non plus vers un nom de fichier réel) dans ce répertoire.
Exemple:
Si votre site contient un dossier nommé/content/css, créez votre bundle css comme suit:
Dans BundleConfig.cs:
bundles.Add(new StyleBundle("~/content/css/AllMyCss.css").Include(
"~/content/css/reset.css",
"~/content/css/bla.css"));
Et sur la page:
@Styles.Render("~/content/css/AllMyCss.css")
Notez que cela suppose que vous n'avez PAS un fichier nommé AllMyCss.css dans votre dossier css.
Je ne sais pas si c'est l'optimisation Web, ou WebGrease, qui est si difficile, mais l'un (ou les deux) l'est et vous devez faire extrêmement attention.
Tout d’abord, il n’ya rien de mal avec votre code:
bundles.Add(new StyleBundle("~/content/css").Include(
"~/content/css/reset.css",
"~/content/css/bla.css"));
En fait, c’est exactement ce que fait Microsoft. La principale raison pour laquelle ils n'ont pas utiliser ~/bundles
pour les CSS est que les chemins relatifs sont fouillés pour les images. Réfléchissez à la manière dont votre navigateur perçoit un ensemble - exactement de la même manière que toute autre URL et que toutes les règles normales relatives au chemin d'accès s'appliquent toujours aux chemins relatifs. Imaginez que votre css ait un chemin d’image vers ../images/bullet.png
. Si vous utilisiez ~/bundles
, le navigateur chercherait dans un répertoire au-dessus de bundles
qui n'existe pas réellement. Il finira probablement par regarder dans ~/images
où vous l'avez probablement dans ~/content/images
.
J'ai trouvé quelques choses qui peuvent vraiment casser et causer des erreurs 404:
Content/CSS
qui contient un dossier images
pour les images CSS.EnableOptimizations=true
pour forcer l'utilisation des bundles lors des testsDisons que nous développons un site sur les chats. Vous pouvez avoir ceci
@Styles.Render("~/Content/css/cats.css") // dont do this - see below why
bundles.Add(new StyleBundle("~/content/css/cats.css").Include(
"~/content/css/reset.css",
"~/content/css/bla.css"));
Cela génère un lien CSS vers ce chemin dans votre code HTML:
/Content/css/cats.css?v=JMoJspikowDah2auGQBfQAWj1OShXxqAlXxhv_ZFVfQ1
Cependant, cela donnera un 404 car je mets une extension .css et IIS (je pense) devient confus.
Si je le change en ceci alors cela fonctionnera bien:
@Styles.Render("~/Content/css/cats")
bundles.Add(new StyleBundle("~/content/css/cats").Include(
"~/content/css/reset.css",
"~/content/css/bla.css"));
Un autre problème déjà signalé par d’autres est que vous ne devez pas faire
@Styles.Render("~/Content/css")
si vous avez un répertoire ou un fichier css (il est peu probable que vous ayez un fichier appelé css
sans extension) dans votre répertoire Content
.
Une astuce supplémentaire est que vous devez vous assurer que votre HTML généré a un numéro de version.
<link href="/Content/css/cats?v=6GDW6wAXIN5DJCxVtIkkxLGpojoP-tBQiKgBTQMSlWw1" rel="stylesheet"/>
Si ce n'est pas le cas et que cela ressemble à ceci, vous n'avez probablement pas de correspondance exacte pour le nom de l'ensemble entre votre table Bundle et votre fichier cshtml.
<link href="/Content/css/cats" rel="stylesheet"/>
N'oubliez pas de vous assurer que le paquetage HttpModule est présent.
<modules>
<remove name="BundleModule" />
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>
Cela m'a piqué la première fois. Pas sûr que la configuration nécessaire doive être ajoutée par le paquet NuGet, mais ce n'était pas dans mon cas.
Cela me semble correct. Lorsque les optimisations sont activées, vous n’avez plus qu’une seule référence et ce sera pour le nom que vous avez spécifié dans StyleBundle (/ content/css). En mode débogage (ou plus précisément avec debug = false dans votre configuration Web), vous obtiendrez les fichiers non optimisés comme d'habitude. Si vous regardez, vous verrez qu'ils sont simplement du texte brut au fur et à mesure que vous les tapez. Toutefois, lorsque les optimzations sont activées (généralement lorsque vous exécutez le mode de publication), vous obtenez une URL plutôt étrange.
Si vous regardez le résultat, cela sera réduit au minimum. La chaîne de requête? V = 5KLoJ .... est basée sur un hachage des fichiers de l'ensemble. Ainsi, la référence peut être mise en cache HTTP en toute sécurité aussi longtemps que vous le souhaitez. Pour toujours si vous voulez, mais je pense le défaut est un an. Cependant, si vous modifiez l'une de vos feuilles de style, un nouveau hachage sera généré. Il s'agit d'un "contournement de la mémoire cache". Vous aurez ainsi une nouvelle copie du navigateur.
Cela dit, je ne sais pas pourquoi vous obtenez un 404. Je soupçonne que cela a quelque chose à voir avec votre configuration de routage ou votre configuration IIS. Utilisez-vous Visual Studio avec IISExpress?
Je viens de résoudre un problème similaire. Le problème était le suivant: j'ai installé 'choisi' via NuGet
. Et dans la classe BundleConfig
, la ligne contenant le fichier CSS
ressemblait à ceci:
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/chosen.css"));
Certains dans cette classe, j'avais cette ligne:
BundleTable.EnableOptimizations = true;
Le correctif consistait à combiner le 2 bundles.Add()
comme suit:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/site.css",
"~/Content/chosen.css"
));
Et cela a réglé le problème pour moi.
Cela peut également être dû au fait que vous n’avez pas déployé bundleconfig.json sur le serveur pour une raison quelconque.