We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to resolve CSS reference issue while including the theme file in bundle?

Platform: ASP.NET MVC |
Control: General
Tags: general



When the CSS files in BundleConfig has reference to some other files, a file not found” issue arises and it is a common issue while using bundling in MVC.


What bundling actually does in MVC?

Bundling is the process of bundling a list of files from the specified location and creating a single bundled file in the targeted location. This targeted location is formed as a virtual path and it is referred in the Application.

Therefore, when you create Style bundle with list of CSS files, the CSS files are bundled into single and referred in Application. In CSS files, mostly you refer to the images that are used in webpage design and these images are placed in Application location and referred through CSS. Accordingly, when you create a bundle and its virtual location is in some other path, then you face the “file not found” issue (like images not loaded). Since the images from physical path and the given virtual path in bundle are in different location.

In the Microsoft forum, the same type of issue is analyzed when you use bundle with CSS and image. Refer to the following link for more details about the issue, "http://forums.asp.net/t/1774324.aspx".


The solutions for the above problem is to create a bundle with virtual location as same as the Application location.

Using Syncfusion EJ Component

The same type of issue occurs when you use Syncfusion EJ component, as different folder structure is maintained for each themes and its corresponding images.


Syncfusion EJ component contains different kind of themes. Each theme contains corresponding theme CSS file and images.

The default folder structure for Syncfusion themes is illustrated in the following screenshot.

Figure 1: Default Folder Structure

Therefore, when you create a bundle and its virtual location is in some other location other than the particular theme location, then you face the same issue (images not loaded).


To solve this problem, create different type of bundles for different type of themes used in Syncfusion EJ component.

For example when you are using default-theme, then create the bundles target location (default-theme) as follows,

bundles.Add(new StyleBundle("~/Content/ej/default-theme/css).Include(


When you are using another theme (“xxx”) then create the bundle’s target location (“xxx”) as follows,

bundles.Add(new StyleBundle("~/Content/ej/xxx/css).Include(


Note: “xxx” is used to provide one of the Syncfusion JavaScript theme name.


2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile