CODEWITHSUNDEEP
cssasp.net-mvcvisual-studio
JC6T
JC6T

Reputation: 165

How to properly include CSS files with @import declarations and use Bundling at the same time.

I am learning about developing and publishing a ASP.NET web app.

Below is how my BundleConfig.cs looks like: 

bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/assets/css/bootstrap.css",
                  "~/assets/css/bootstrap-datetimepicker.css",
                  "~/assets/css/language.css",
                  "~/assets/css/core.css",
                  "~/assets/css/components.css",
                  "~/assets/css/icons.css",
                  "~/assets/css/pages.css",
                  "~/assets/css/menu.css",
                  "~/assets/css/responsive.css",
                  "~/assets/css/jquery-ui.css",
                  "~/assets/css/DataTables/jquery.dataTables.min.css",
                  "~/assets/css/DataTables/colReorder.dataTables.min.css",
                  "~/assets/css/DataTables/responsive.dataTables.min.css"));

Inside my core.css file, there is a 

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Karla:700|Nunito+Sans:600,700');

I understand that with the current configuration, when it bundles and compress all the css files together it will produce this error:

Minification failed. Returning unminified contents. Unexpected token, found '@import'

I understand that this error is caused by the fact that the @import declaration is found in the middle of the bundled/minified css.

I am trying to understand what is the correct standard in including all the css file properly such that when I use ASP.NET MVC's bundling, this kind of error will not happen? Do I have to create another .css file with all the @import declarations ?

Upvotes: 4

Views: 2314

Answers (2)

George Beier
George Beier

Reputation: 256

I couldn't get CSSTidy or AjaxMin to work. Same problem with the "unexpected token". I started reading about @import and it seemed like it was slower than using the link in the page because the CSS has to be pulled down and then the import directive is run. It seems the link is faster. But who wants to modify the header of every page? Yuck.

I put a placeholder on the page and wrote a method that modifies the header by adding a link into the header at runtime. Works like a charm and only needs to be maintained on one place.

In Webforms (yeah, I know):

// Create the link
HtmlLink cssLink = new HtmlLink();
cssLink.Href = YOUR_LINK;
cssLink.Attributes.Add("rel", "stylesheet");
cssLink.Attributes.Add("type", "text/css");

// Add the link to the page
YOUR_PAGE.Header.Controls.Add(cssLink);

Upvotes: 0

Hooman Bahreini
Hooman Bahreini

Reputation: 15559

@import should be the first rule in your css, that's why you are getting an error adding it in the middle of your css, @import CSS

The @import CSS at-rule is used to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules;

@import should not be included in a bundle.

This is what fonts.google.com is saying about adding the fonts to your page:

To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document.

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

This is an example where add the font in my _Layout page:

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

Upvotes: 4

Related Questions