在VS @import& quot; theme.css& quot;中发布网站时无法正常工作 [英] When publishing site in VS @import "theme.css" isn't working

问题描述

我有一个网站，它依赖于某些样式化jquery ui theme.css的css.

I have a site that relies on some of the css styling the the jquery ui theme.css.

当我在本地运行项目时，这可以很好地工作，但是当我发布和部署这些特定样式时，这些样式就不会被选择.

When I run my project locally, this works fine, but when I publish and deploy, those particular styles aren't being picked up.

例如，当我在本地检查对话框关闭按钮时，它会显示标准的交叉图像，但是在已发布的网站上，它显示为关闭"，并且没有theme.css的样式.

When I inspect a dialog close button, for example, locally, it shows the standard cross image, but on the published site, it says "Close" and doesn't have the styling from theme.css

我已经检查过，并且theme.css通常包含在目录结构中.

I have checked and theme.css is included in the directory structure in the normal place.

当我查看最小化的CSS文件时，它开始@import"base.css"; @ import"theme.css";来自Content/themes/base/all.css，但显然不是在阅读这些内容.

When I look at the minimised css file, it starts @import"base.css";@import"theme.css"; which comes from the Content/themes/base/all.css, but obviously it isn't reading these.

我需要做些什么才能将它们正确地包含在发布的网站上吗?

Is there something I need to do to include these properly on the published site?

谢谢

很明显，我可以在包中单独引用所有jqueryui css文件，但是使用@include指令会很有用.

obviously I can just reference all the jqueryui css files individually in my bundle, but it would be useful to use the @include directive.

推荐答案

在我继承的项目中，jQueryUI库存在相同的问题.

I had the same problem with the jQueryUI library in a project I'd inherited.

这是由于以下原因引起的:

It was caused by this line:

bundles.Add(new StyleBundle("~/Content/jqueryui").Include(
              "~/Content/themes/base/all.css"));

该 all.css 文件仅包含此文件...

That all.css file just contained this...

@import "base.css";
@import "theme.css";

...和那些 @import 命令似乎是问题所在.它们只是无法与捆绑一起正常工作.

... and those @import commands seem to be the problem. They just don't work properly with bundling.

这两个文件之一， base.css ，也是，只是 @import 命令的列表.

And one of those two files, base.css, was also just a list of @import commands.

我的解决方案是将 bundles.Add()行替换为那些 @import 语句试图包括的所有.css文件的列表:

My solution was to replace the bundles.Add() line with a list of all of the .css files which those @import statements were attempting to include:

bundles.Add(new StyleBundle("~/Content/jqueryui").Include(
                "~/Content/themes/base/core.css",
                "~/Content/themes/base/accordion.css",
                "~/Content/themes/base/autocomplete.css",
                "~/Content/themes/base/button.css",
                "~/Content/themes/base/datepicker.css",
                "~/Content/themes/base/dialog.css",
                "~/Content/themes/base/draggable.css",
                "~/Content/themes/base/menu.css",
                "~/Content/themes/base/progressbar.css",
                "~/Content/themes/base/resizable.css",
                "~/Content/themes/base/selectable.css",
                "~/Content/themes/base/selectmenu.css",
                "~/Content/themes/base/sortable.css",
                "~/Content/themes/base/slider.css",
                "~/Content/themes/base/spinner.css",
                "~/Content/themes/base/tabs.css",
                "~/Content/themes/base/tooltip.css",
                "~/Content/themes/base/theme.css"));

不用说，您应该始终在Chrome中打开捆绑"的网页，并打开开发人员选项"面板，并检查网络"或控制台"标签中是否有与丢失的捆绑文件有关的404错误.

It goes without saying, you should always refresh your "bundled" webpages in Chrome, with the Developer Options panel open, and check either the Network or Console tab for any 404 errors relating to missing bundled files.

这篇关于在VS @import& quot; theme.css& quot;中发布网站时无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！