Menu
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 ?
232
asked Sep 14 '25 17:09
@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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
