Linking and minimizing don't give the right way

Question

I had a problem with the function of combining and minimizing ASP.NET MVC 4 Basically, I have the following package installation:

bundles.Add(new StyleBundle("~/backendcss").Include( "~/backendContent/bootstrap/css/bootstrap.min.css", "~/backendContent/assets/jui/css/jquery-ui.css", "~/backendContent/assets/jui/jquery-ui.custom.css", "~/backendContent/plugins/uniform/css/uniform.default.css", "~/backendContent/plugins/fullcalendar/fullcalendar.css", "~/backendContent/plugins/fullcalendar/fullcalendar.print.css", "~/backendContent/assets/css/fonts/icomoon/style.css", "~/backendContent/assets/css/main-style.css", "~/backendContent/plugins/pnotify/jquery.pnotify.css", "~/backendContent/plugins/msgbox/jquery.msgbox.css", "~/backendContent/IntroJS/css/introjs.css")); 

when they are placed on the page, they go like this:

 <link href="/backendContent/assets/jui/css/jquery-ui.css" rel="stylesheet"/> <link href="/backendContent/assets/jui/jquery-ui.custom.css" rel="stylesheet"/> <link href="/backendContent/plugins/uniform/css/uniform.default.css" rel="stylesheet"/> <link href="/backendContent/plugins/fullcalendar/fullcalendar.css" rel="stylesheet"/> <link href="/backendContent/plugins/fullcalendar/fullcalendar.print.css" rel="stylesheet"/> <link href="/backendContent/assets/css/fonts/icomoon/style.css" rel="stylesheet"/> <link href="/backendContent/assets/css/main-style.css" rel="stylesheet"/> <link href="/backendContent/plugins/pnotify/jquery.pnotify.css" rel="stylesheet"/> <link href="/backendContent/plugins/msgbox/jquery.msgbox.css" rel="stylesheet"/> <link href="/backendContent/IntroJS/css/introjs.css" rel="stylesheet"/> 

• The first problem is that Tilda ~ not at the beginning of the link, and I think that one of the problems (the site does not display properly) now all of the above CSS stylesheets are resolved, but there are many imported and relative URLs (images ), and I think these problems are messed up (no packages, if I just point to ~/backendContent/.... everything works just fine

• The second problem is that when I set BundleTable.EnableOptimizations = true; , a lot more problems arise and delve deeper. I get a huge list (4368.1): CSS1019 runtime error: Unexpected token found by '@import' (4368.9): CSS1019 runtime error: Unexpected token found by 'url ("layout.css")'

I don’t know if this is important, but the style-related link created by @Styles.Render("~/backendcss") :

  <link href="/backendcss?v=eMX6YcVB78xPWZV9Dw6seHqsT742J8_M1irfUC0IdaQ1" rel="stylesheet"/> 

Any ideas? Sorry, but this is the first time I use this feature, and with this site having so many css and js, it will save a lot of bandwidth and speed up the whole site. Plus its just awesome (that is, if I can get it to work) !!!

Answer 1

• ~ should not be displayed. This is a special character in asp.net that means the root of the application

• I'm not sure why you have problems with the actual minimum, but it would be rather difficult to diagnose without a source.

• An optimized link should look like this. "v = xxx at the end - to iterate over the cache so that people get updated css when changing css files.

Answer 2

Darren Kopp is right. "This is not supposed to be displayed. This is a special character in asp.net that means the root of the application."

And do not use ".min" because when you set BundleTable.EnableOptimizations = true; This will minimize your files. So it should be like this:

 bundles.Add(new StyleBundle("~/backendcss").Include( "~/backendContent/bootstrap/css/bootstrap.css", "~/backendContent/assets/jui/css/jquery-ui.css", "~/backendContent/assets/jui/jquery-ui.custom.css", "~/backendContent/plugins/uniform/css/uniform.default.css", "~/backendContent/plugins/fullcalendar/fullcalendar.css", "~/backendContent/plugins/fullcalendar/fullcalendar.print.css", "~/backendContent/assets/css/fonts/icomoon/style.css", "~/backendContent/assets/css/main-style.css", "~/backendContent/plugins/pnotify/jquery.pnotify.css", "~/backendContent/plugins/msgbox/jquery.msgbox.css", "~/backendContent/IntroJS/css/introjs.css")); 

Answer 3

I think that to minimize the work you need to add the global.asax file

BundleTable.EnableOptimizations = true;

You can also try to create different groups, for example, keeping jqueryui separate from the boot, etc.