Search code examples
cssasp.net-mvcbootstrap-studio

Issue linking CSS files exported from Bootstrap Studio


I am working on an ASP.NET MVC project. I designed my webpages in visual studio. At first, I just copied my HTML code into the .cshtml documents, and I moved the .css files to the appropriate locations (in wwwroot).

When I did so, at the end of the .css files, there was the following link:

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/styles.min.css?h=a9f290cd0cc57883e137369b4ae648cc"> 

I did not worry about the characters after the .css file extention at the time. The stylesheets worked with no issues.

After exporting again, I got new numbers at the end:

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/styles.min.css?h=cd91b4591da6e3a842e0881e1a97d069">

I assumed this would be no problem, and that I could just replace the file. I replaced the file, and I replaced, the link. As result, all html pages associated with those stylesheets stopped working with the stylesheet. I checked the network, and it did seem that my browser was legitimately linking the stylesheet.

I reverted back to the original link, and the only styles missing were the new styles I added. It seems as though it is referencing an older stylesheet (which I cannot see).


Solution

  • Update:

    As I expected, the numbers at the end were version numbers.

    Workaround: when you export from Bootstrap Studio, there is a check box that determines whether or not to version the assets exported. It was previously checked. I simply unchecked it, and replaced the files and the corresponding links (to links that did not contain version numbers). Everything worked great.

    I believe that the issue began in the bootstrap.css file with this line of code:

    sourceMappingURL=bootstrap.css.map
    

    I also believe that the solution to this problem would be to replace the bootstrap.css.map file (which I apparently forgot to do) so that the version mapping will be updated.

    If versioning is not desired, then one can do as I did, or they can comment out the line of code like this.