How to resolve CSS reference issue while including the theme file in bundle in ASP.NET General?

Problem

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.

Reason

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".

Solution

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.

Problem

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).

Solution

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 bundle’s target location (default-theme) as follows,

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

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