在单独呈现相同的css文件时，在包文件中添加我的css文件将不会产生相同的效果

I have defined the following bundle, inside my asp.net mvc-5 web application:-

我在我的asp.net mvc-5 Web应用程序中定义了以下包: -

var bundle5 = new StyleBundle("~/Content/css")
               .Include("~/Content/bootstrap.css")
                    .Include("~/Content/style.css")
                     .Include("~/fonts/font-awesome.css")
                   .Include("~/Content/touchTouch.css")
                ;
            bundle5.Orderer = new NonOrderingBundleOrderer();

            bundles.Add(bundle5);


class NonOrderingBundleOrderer : IBundleOrderer
    {
        public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
        {
            return files;
        }
    }

and i am referencing this bundle inside the _layout view as follow:-

我在_layout视图中引用此包,如下所示: -

@Styles.Render("~/Content/css")

now this will render the below fonts, which is not what i am looking for:-

现在这将呈现以下字体,这不是我想要的: -

but if i render the same css files defined inside the bundle file individually as follow:-

但如果我单独渲染捆绑文件中定义的相同css文件,如下所示: -

i will get the effect i want as follow:-

我会得到我想要的效果如下: -

now i checked the browser using F12 as seems using the two approaches i can see exactly the same css rules applies to the page.. but not sure why the final result is not the same ?

现在我使用F12检查浏览器似乎使用两种方法我可以看到完全相同的css规则适用于页面..但不知道为什么最终结果不一样?

also if i split the css into two bundles as follow:-

如果我将css拆分为两个捆绑包如下: -

var bundle5 = new StyleBundle("~/Content/css")
               .Include("~/Content/bootstrap.css")
                    // .Include("~/Content/style.css")
                     .Include("~/fonts/font-awesome.css")
                   .Include("~/Content/touchTouch.css")

                ;
            bundle5.Orderer = new NonOrderingBundleOrderer();

            bundles.Add(bundle5);
            var bundle6 = new StyleBundle("~/Content/Customcss")

                   .Include("~/Content/style.css")
                ;
            bundle6.Orderer = new NonOrderingBundleOrderer();

            bundles.Add(bundle6);

and render them inside the view as follow:-

并在视图中呈现它们如下: -

@Styles.Render("~/Content/css")

    @Styles.Render("~/Content/Customcss")

the result will be correct,, so i am really confused on what is going on ? i doubt the order of the css matters in my case, because when i define the css individually it work well. so it is not related to having the style.css render after the other scripts,, because when they are render individually the style.css is second in the order and the result was correct..

结果将是正确的,所以我真的很困惑发生了什么?我怀疑css的顺序在我的情况下很重要,因为当我单独定义css时它运作良好。所以它与其他脚本之后的style.css渲染无关,因为当它们单独渲染时,style.css在顺序中排在第二位,结果是正确的。

EDIT

now i define the following bundle to include all the css :-

现在我定义以下包来包含所有的CSS: -

 var bundle5 = new StyleBundle("~/Content/css")
               .Include("~/Content/bootstrap.css")

                     .Include("~/fonts/font-awesome.css")
                   .Include("~/Content/touchTouch.css")
                  .Include("~/Content/style.css")
                ;
            bundle5.Orderer = new NonOrderingBundleOrderer();

            bundles.Add(bundle5);

and i reference it inside my _layout view as follow:-

我在我的_layout视图中引用它如下: -

 @Styles.Render("~/Content/css");

here is the generated code for the bundle :-

这是生成的包的代码: -

<link href="/Content/css?v=uEwsjHXMY4OZeiDkOmQdOIlIjQMZpRc0advYoZe5jPg1" rel="stylesheet"/>

if i click on the bundle i can see that there are some errors at the beginning of the file:-

如果我点击捆绑包,我可以看到文件开头有一些错误: -

/* Minification failed. Returning unminified contents.
(7384,1): run-time error CSS1019: Unexpected token, found '@import'
(7384,9): run-time error CSS1019: Unexpected token, found 'url(//fonts.googleapis.com/css?family=Ubuntu:400,700)'
(7385,2): run-time error CSS1019: Unexpected token, found '@import'
(7385,10): run-time error CSS1019: Unexpected token, found 'url(//fonts.googleapis.com/css?family=Oswald)'
 */
/*!

so could this be causing the problem ? now i have these lines inside my style.css:-

这可能导致问题吗?现在我在style.css中有这些行: -

@import url(//fonts.googleapis.com/css?family=Ubuntu:400,700);
 @import url(//fonts.googleapis.com/css?family=Oswald);

so could those @import causing the problem inside the bundle ? again if i include the style.css on a separate bundle i will not get any error , seems the problem will happen if i include the style.css inside a shared bundle (i mean by shared bundle as bundle that contain other css files),, so can any one adivce how i can fix this ?

那些@import会导致捆绑内的问题吗?再次,如果我在一个单独的包中包含style.css我不会得到任何错误,似乎问题将发生如果我在共享包中包含style.css(我的意思是共享包作为包含其他css文件的包), ,任何人都可以尝试如何解决这个问题吗?

1 个解决方案

#1

Updated:

About the effect been different, the problem is that bundle take all css that you put on it and transform in a single css. So if you have ten css files referenced in your bundle on develop, on production you have only one archive in source files. See by yourself clicking with mouse right button on your site and seeing source code and clicking on the <link> tag of your site. This way, conflicts in css occurs.

关于效果不同,问题是bundle接受你放在它上面的所有css并在单个css中转换。因此,如果您在开发中的捆绑包中引用了10个css文件,那么在生产中您只有一个源文件存档。在您的网站上单击鼠标右键并查看源代码并单击您站点的 标记。这样,就会发生css冲突。

If you had css files that override others, you'll need to do separated bundles to them and insert them in the correct order you need your effects to happen.

如果您的css文件覆盖了其他文件,则需要对它们执行单独的分发,并按正确的顺序插入它们,以使您的效果发生。

PS.: I'm having a similar problem and for what I could understand until now, bundle is not loading files that would be loaded by @import.

PS。:我有一个类似的问题,直到现在我才能理解,bundle不会加载由@import加载的文件。

Take a look at the answer of this stack: MVC4 bundling CSS failed Unexpected token, found '@import'

看看这个堆栈的答案:MVC4捆绑CSS失败意外令牌,发现'@import'

Updated:

The answer of stack above is that bundles don't admit @imports, so you have to especify each of your css files in the bundle, like this:

上面的堆栈的答案是bundle不允许@imports,所以你必须指定bundle中的每个css文件,如下所示:

 bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
    "~/Content/themes/base/jquery.ui.core.css",
    "~/Content/themes/base/jquery.ui.resizable.css",
    "~/Content/themes/base/jquery.ui.selectable.css",
    "~/Content/themes/base/jquery.ui.accordion.css",
    "~/Content/themes/base/jquery.ui.autocomplete.css",
    "~/Content/themes/base/jquery.ui.button.css",
    "~/Content/themes/base/jquery.ui.dialog.css",
    "~/Content/themes/base/jquery.ui.slider.css",
    "~/Content/themes/base/jquery.ui.tabs.css",
    "~/Content/themes/base/jquery.ui.datepicker.css",
    "~/Content/themes/base/jquery.ui.progressbar.css",
    "~/Content/themes/base/jquery.ui.theme.css"));

So, this way all css files are loaded and you doesn't have problems with @import.

因此,这样加载所有css文件,你就没有@import的问题。