How to avoid CSS and bundling hell?

Question

I have the same problem for every asp.net MVC site I develop, so I am wondering if there is a solution to this.

The site works perfectly when I am developing, however, when I publish the site, I have always problems with bundling. To solve it, I have to disable optimizations.

First of all, bundling joins all the bundled CSS's in only one file in the ~\Content folder, even when all CSS's inside one bundle is inside a subdirectory. The consequence is that images referenced from the CSS's got lost because they have relative URL's.

The second problem is that for some strange reason, JS bundling system does not want all JS's inside the same file, because JS files reported errors when bundled and site does not work at all.

This is my BundleConfig.cs file that works. If I remove BundleTable.EnableOptimizations = false; at the end, nothing works. A lot of Javascript errors occur.

    public static void RegisterBundles(BundleCollection bundles)
    {
        if (bundles != null)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/umd/popper.js",
                      "~/Scripts/bootstrap.js"));

            bundles.Add(new ScriptBundle("~/bundles/custom").Include(
                        "~/Scripts/custom.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/site.css",
                    "~/Content/site/style.css"));

            bundles.Add(new StyleBundle("~/Content/waitMe").Include(
                    "~/Content/waitMe.css"));

            bundles.Add(new ScriptBundle("~/bundles/waitMe").Include(
                    "~/Scripts/waitMe.js"));

            bundles.Add(new StyleBundle("~/Content/sweetalert").Include(
                   "~/Content/sweetalert2.min.css"));

            bundles.Add(new ScriptBundle("~/bundles/sweetalert").Include(
                    "~/Scripts/sweetalert2/sweetalert2.all.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/bundle").Include(
                      "~/Scripts/bundle.js"));

            bundles.Add(new ScriptBundle("~/bundles/moment").Include(
                      "~/Scripts/moment-with-locales.js"));

            bundles.Add(new ScriptBundle("~/bundles/mask").Include(
                "~/Scripts/jquery.inputmask.js"));

            bundles.Add(new StyleBundle("~/Content/daterangepicker").Include(
                    "~/Content/daterangepicker.css"));

            bundles.Add(new ScriptBundle("~/bundles/daterangepicker").Include(
                    "~/Scripts/daterangepicker.js"));

            bundles.Add(new StyleBundle("~/Content/select2").Include(
                "~/Content/select2.css"));

            bundles.Add(new ScriptBundle("~/bundles/select2").Include(
                    "~/Scripts/select2.js",
                    "~/Scripts/i18n/es.js"));

            bundles.Add(new StyleBundle("~/Content/tapatar").Include(
                    "~/Content/tapatar.css"));

            bundles.Add(new ScriptBundle("~/bundles/tapatar").Include(
                    "~/Scripts/tapatar.js"));

            bundles.Add(new ScriptBundle("~/bundles/assets").Include(
                    "~/Scripts/canvas.js",
                    "~/Scripts/collapse.js",
                    "~/Scripts/settings.js",
                    "~/Scripts/template.js",
                    "~/Scripts/default-assets/active.js"));

            bundles.Add(new StyleBundle("~/Content/grid").Include(
                      "~/Scripts/DataTables/DataTables-1.10.20/css/dataTables.bootstrap4.css",
                      "~/Scripts/DataTables/FixedColumns-3.3.0/css/fixedColumns.bootstrap4.css",
                      "~/Scripts/DataTables/Responsive-2.2.3/css/responsive.bootstrap4.css",
                      "~/Scripts/DataTables/Scroller-2.0.1/css/scroller.bootstrap4.css",
                      "~/Scripts/DataTables/Select-1.3.1/css/select.bootstrap4.css",
                      "~/Scripts/DataTables/RowGroup-1.1.1/css/rowGroup.bootstrap4.css"));

            bundles.Add(new ScriptBundle("~/bundles/grid").Include(
                      "~/Scripts/DataTables/DataTables-1.10.20/js/jquery.dataTables.js",
                      "~/Scripts/DataTables/DataTables-1.10.20/js/dataTables.bootstrap4.js",
                      "~/Scripts/DataTables/FixedColumns-3.3.0/js/dataTables.fixedColumns.js",
                      "~/Scripts/DataTables/Responsive-2.2.3/js/dataTables.responsive.js",
                      "~/Scripts/DataTables/Scroller-2.0.1/js/dataTables.scroller.js",
                      "~/Scripts/DataTables/Select-1.3.1/js/dataTables.select.js",
                      "~/Scripts/DataTables/RowGroup-1.1.1/js/dataTables.rowGroup.js",
                      "~/Scripts/DataTables/dataTables.datetime.js"));

            bundles.Add(new ScriptBundle("~/bundles/editor").Include(
                    "~/Scripts/tinymce/tinymce.js"));

            bundles.Add(new StyleBundle("~/Content/imageuploader").Include(
                    "~/Content/ssi-uploader.css"));

            bundles.Add(new ScriptBundle("~/bundles/imageuploader").Include(
                    "~/Scripts/ssi-uploader.js"));

            bundles.Add(new StyleBundle("~/Content/popup").Include(
                    "~/Content/magnific-popup.css"));

            bundles.Add(new ScriptBundle("~/bundles/popup").Include(
                    "~/Scripts/jquery.magnific-popup.js",
                    "~/Scripts/i18n/jquery.magnific-popup.es.js"));

            bundles.Add(new ScriptBundle("~/bundles/fileinput").Include(
                    "~/Scripts/fileinput.js",
                    "~/Scripts/locales/es.js",
                    "~/Content/bootstrap-fileinput/themes/fas/theme.js"
                    ));

            bundles.Add(new StyleBundle("~/Content/fileinput").Include(
                    "~/Content/bootstrap-fileinput/css/fileinput.css"));

            bundles.Add(new StyleBundle("~/Content/toastr").Include(
                    "~/Content/toastr.min.css"));

            bundles.Add(new ScriptBundle("~/bundles/toastr").Include(
                    "~/Scripts/toastr.js"));

            bundles.Add(new ScriptBundle("~/bundles/cleave").Include(
                    "~/Scripts/cleave.js"));

            bundles.Add(new StyleBundle("~/Content/summernote").Include(
                    "~/Content/summernote/summernote-bs4.css"));

            bundles.Add(new ScriptBundle("~/bundles/summernote").Include(
                    "~/Scripts/summernote/summernote-bs4.js",
                    "~/Scripts/summernote/lang/summernote-es-ES.js"
                    ));

            bundles.Add(new ScriptBundle("~/bundles/apexcharts").Include(
                    "~/Scripts/apexcharts/apexcharts.js"));

            bundles.Add(new ScriptBundle("~/bundles/pace").Include(
                    "~/Scripts/inicio/pace.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/home").Include(
                    "~/Scripts/inicio/jquery-2.1.3.min.js",
                    "~/Scripts/inicio/plugins.js",
                    "~/Scripts/inicio/main.js"));

            bundles.Add(new StyleBundle("~/Content/home").Include(
                    "~/Content/inicio/base.css",
                    "~/Content/inicio/vendor.css",
                    "~/Content/inicio/main.css"));

            bundles.Add(new ScriptBundle("~/bundles/paises").Include(
                    "~/Scripts/paises/cl/jquery.rut.js"));

            bundles.Add(new StyleBundle("~/Content/datepicker").Include(
                    "~/Content/bootstrap-datepicker.css"));

            bundles.Add(new ScriptBundle("~/bundles/datepicker").Include(
                    "~/Scripts/bootstrap-datepicker.js",
                    "~/Scripts/bootstrap-datepicker.es.js"
                    ));

            bundles.Add(new StyleBundle("~/Content/timepicki").Include(
                    "~/Content/timepicki.css"));

            bundles.Add(new ScriptBundle("~/bundles/timepicki").Include(
                    "~/Scripts/timepicki.js"
                    ));

            bundles.Add(new StyleBundle("~/Content/fileinput").Include(
                    "~/Content/fileinput/css/fileinput.css"));

            bundles.Add(new ScriptBundle("~/bundles/fileinput").Include(
                            "~/Scripts/fileinput/fileinput.js",
                            "~/Scripts/fileinput/locales/es.js",
                            "~/Scripts/fileinput/themes/fa/theme.js"));

            bundles.Add(new ScriptBundle("~/bundles/clock").Include(
                            "~/Scripts/jclock.js"));

            bundles.Add(new ScriptBundle("~/bundles/tinymce").Include(
                            "~/Scripts/tinymce/tinymce.js",
                            "~/Scripts/tinymce/langs/es_MX.js"));

            BundleTable.EnableOptimizations = false;
        }

Is there a good practice to avoid all this hell?

Jaime

TejSoft · Accepted Answer · 2020-06-25T04:03:25.003

0

You have to use CssRewriteUrlTransform at the time of bundling so that relative image paths (relative from css file location) are converted to absolute path from the website root. An example is below:

bundles.Add(new StyleBundle("~/Content/fileinput").Include("~/Content/fileinput/css/fileinput.css", new CssRewriteUrlTransform()));

edited Jun 25 '20 at 04:03

answered Jun 25 '20 at 01:47

TejSoft

3,213
6
34
58

Thanks. Since there is a lot of CSS included, I think I can instantiate `CssRewriteUrlTransform` only once and use that instance in every CSS included, right? And, what about the JS? what may be the problem with bundling all of them together? – jstuardo Jun 25 '20 at 13:13
You need to pass a new instance of `CssRewriteUrlTransform` for each css file. Check the answer here: https://stackoverflow.com/questions/27277614/asp-net-mvc-cssrewriteurltransform-multiple-arguments – TejSoft Jun 25 '20 at 23:38
For javascript, it is better to prepare the bundle at the same level where the scripts reside. – TejSoft Jun 25 '20 at 23:45

How to avoid CSS and bundling hell?

1 Answers1