CODEWITHSUNDEEP
cssasp.nettwitter-bootstrapinternet-explorersass
ccwscott
ccwscott

Reputation: 51

scss files work locally but not in deployment, works in chrome, not in IE

I'm using standard bootstrap with ASP .Net C# and it seems to be generating a lot of files like _navbar.scss. These work fine on localhost in both IE and Chrome. When I publish, it works in Chrome, but in IE none of the styles are being applied. I unfortunately have to code to IE as our standard.

I could understand it not working in IE both locally and in deployment, that would just be an issue with IE not complying with basic standards, but it does work on IE locally. I could understand it not working in production, that would likely indicate that something wasn't being copied over or something. I can't understand why it would work in production, and work in IE, but not specifically IE while in production.

Upvotes: 0

Views: 1402

Answers (1)

Jon Ryan
Jon Ryan

Reputation: 1637

Just to try and clear some of that up...

.scss files

The standard template does not generate .scss (Sass) files. It actually returns a standard .css file. The reason when debugging in chrome it shows .scss files is because of a source map which sort of deconstructs the .css file to tell you where in the .sass files that created it where the code originates.

You can read about source maps here

And find out more about Sass here

Css Differences Between Development and Production

The default template in _layout.cshtml has something like the following :

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
          crossorigin="anonymous"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
</environment>

What This Means:

  • In development you get the un-minified css
  • In production it will try and use a CDN for the bootstrap css
  • If the CDN is not available it will use the local minified css

You can read more about the Environment tag helper here

Bootstrap IE Support

Bootstrap only supports IE10+ so if you are trying to use an older version of IE that will be your issue. See here

If you do use polyfills to get it working with older versions of IE, IE still has some quirks to watch out for. For one if using additional style sheets IE 6-9 had a maximum number of rules they could deal with before freaking out, which you may easily exceed. See here

Working Out The Issue

If it is IE 10+ try and:

  1. Verify is that the production site is correctly pointing to the right CDN path
  2. Verify that the fullback css path is accurate and not returning a 404

Hope that helps.

Upvotes: 1

Related Questions