locked
My Minified And Bundled CSS and JS aren't being loaded RRS feed

  • Question

  • User1349647816 posted

    I have a few files that I am bundling into a single javascript file using .net core bundling and minification plugin, I have confirmed that the js file is generated under js/site.min.js however when setting my environment variable to "Staging,Production" both these generated files aren't being loaded and I can figure out why

    _Layout.cshtml

    <environment include="Development">
            <link href="~/css/bootstrap.css" rel="stylesheet" />
            <link href="~/css/material.min.css" rel="stylesheet" />
            <link href="~/css/site.css" rel="stylesheet" />
            <link href="~/lib/jqueryui/jquery-ui.css" rel="stylesheet" />
    
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
            <script src="~/lib/jqueryui/jquery-ui.js"></script>
            <script src="~/js/custom.js"></script>
            <script src="~/js/material.min.js"></script>
            <script src="~/js/modernizr-2.6.2.js"></script>
            <script src="~/js/site.js"></script>
        </environment>
    
        <environment include="Staging,Production">
            <script src="~/js/site.min.js" asp-append-version="true"></script>
            <link href="~/css/site.min.css" rel="stylesheet" />        
        </environment>

    bundleconfig.json

    [
      {
        "outputFileName": "wwwroot/js/site.min.js",
        "inputFiles": [
          "wwwroot/lib/jquery/dist/jquery.js",
          "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
          "wwwroot/lib/jqueryui/jquery-ui.js",
          "wwwroot/js/custom.js",
          "wwwroot/js/material.min.js",
          "wwwroot/js/modernizr-2.6.2.js",
          "wwwroot/js/site.js"
        ],
        "minify": {
          "enabled": true,
          "renameLocals": true
        },
        "sourceMap": false
      },
      {
        "outputFileName": "wwwroot/css/site.min.css",
        "inputFiles": [
          "wwwroot/css/bootstrap.css",
          "wwwroot/css/material.min.css",
          "wwwroot/css/site.css",
          "wwwroot/lib/jqueryui/jquery-ui.css" 
        ],
        "minify": {
          "enabled": true,
          "renameLocals": true
        },
        "sourceMap": false
      }
    ]

    So why are my two bundled files i.e site.min.css and site.min.js being loaded?

    Wednesday, September 2, 2020 11:46 AM

Answers

  • User753101303 posted

    Hi,

    Always be explicit about what happens. No files are loaded or all works as if "Development" is used?

    The environment variable is really "Staging,Production" ? What if you try "Staging" or "Production" alone ?

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 2, 2020 12:23 PM

All replies

  • User753101303 posted

    Hi,

    Always be explicit about what happens. No files are loaded or all works as if "Development" is used?

    The environment variable is really "Staging,Production" ? What if you try "Staging" or "Production" alone ?

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 2, 2020 12:23 PM
  • User1349647816 posted

    Hi,

    All is well if just development is used. I used your suggestion and changed "Staging,Production" to just "Production" and that worked perfectly, why is that?

    I have changed my bundleconfig to generate a third file as per my code below but the new file "othercss.min.css" isn't being generated.

    [
      {
        "outputFileName": "~/js/site.min.js",
        "inputFiles": [
          "~/lib/jquery/dist/jquery.js",
          "~/lib/bootstrap/dist/js/bootstrap.js",
          "~/lib/jqueryui/jquery-ui.js",
          "~/js/globals.js",
          "~/js/custom.js",
          "~/js/material.min.js",
          "~/js/modernizr-2.6.2.js",
          "~/js/respond.js",
          "~/js/site.js"
        ],
        "minify": {
          "enabled": true,
          "renameLocals": true
        },
        "sourceMap": false
      },
      {
        "outputFileName": "~/css/site.min.css",
        "inputFiles": [
          "~/css/site.css"
        ],
        "minify": {
          "enabled": true,
          "renameLocals": true
        },
        "sourceMap": false
      },
      {
        "outputFileName": "~/css/othercss.min.css",
        "inputFiles": [
          "~/css/bootstrap.css",
          "~/css/material.min.css"
        ],
        "minify": {
          "enabled": true,
          "renameLocals": true
        },
        "sourceMap": false
      }
    ]

    Wednesday, September 2, 2020 1:08 PM
  • User753101303 posted

    If you have a comma this is a list. So "Staging,Production" means either the "Staging" or the "Production" environment.

    It seems you changed wwwroot to ~ everywhere. What if putting back wwwroot ?

    ~ is a special notation that is used to refer to the application virtual path root (for example if installed under a main site, it allows to easily refer to https://site.com/myapp rather than https://site.com). It is resolved at runtime and so it makes sense when rending for example a script tag but it likely doesn't make sense at all for a compile time tool.

    Edit: you can  use "View source" in your browser to see how your script tags using the ~ notation are rendered in the HMTL markup. But from the bundling tool perspective it likely try to find files to process inside a non existing "~" folder rather than in the "wwwroot" folder.

    Wednesday, September 2, 2020 1:27 PM
  • User1349647816 posted

    Hi,

    Thanks for the advice and the explanation, I have changed the "~" to "wwwroot" and it works I will use this convention from now on.

    Wednesday, September 2, 2020 3:00 PM