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).
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.
Related
I'm on a Mac, macOS High Sierra 10.13.6
Since i updated Chrome a week or two ago, changes i make to CSS files (or SCSS for what its worth) will be saved correctly always, but Chrome will only refresh the styles in my page once. Local Overrides are disabled, Workspaces set up correctly, Source Maps are and have always been proper and in place. Nothing actually changed in my environment, other than updating Chrome.
I tried resetting all the caches, tried hard reloads, removing cache internals even. I tried anything i could think of. I researched online but was not able to find answers to this particular problem.
So to sum it up:
I open Chrome
I load my page locally (a localhost environment)
I open Developer Tools
I pick an element on my page
I click on the name of the resource on the right (a CSS or SCSS file)
I make changes to the source of the CSS/SCSS file file via the sources tab
I hit save. Changes are saved. Netbeans if open will immediately show the changes. If it was a SASS file, NetBeans triggers the compile on change
Chrome updates the styles in the page as it should
I make another change in Sources panel
I save the changes
Changes are saved – if NetBeans is open it will show the changes immediately and if it is a SASS file it will compile it
Chrome does not update the styles in the page. Never again until i reload.
I even reinstalled Chrome. Removed ~/Library/Application Support/Google/Chrome entirely and restarted the browser after, starting off with a completely fresh profile. Still no jazz.
Can someone point me in the right direction here?
After my frustration went through the roof, i decided to meticulously cut down content from my rather large primary SCSS file for the page, reloading the page each time, trying and testing out making changes. Turns out the problem went away as soon as i removed a certain #import on top of the file. But other imports worked.
Why?
The imported file was for fonts. It contained various #font-face definitions. And on the bottom i had two `#import' statements referring to external resources via http.
I removed those and bingo – now Chrome was updating the styles properly with every change i made. Problem solved. Is this a bug? I don't know.
I then tried to place the imports directly in the main SCSS file on top, and even then they will cause the problem to occur.
The SASS documentation has this to say:
Plain CSS #imports
Because #import is also defined in CSS, Sass needs a way of compiling plain CSS
#imports without trying to import the files at compile time. To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any #imports with the following characteristics to plain CSS imports:
Imports where the URL ends with .css.
Imports where the URL begins http:// or https://.
Imports where the URL is written as a url().
Imports that have media queries.
In other words, i basically wrote a normal CSS #import and while i have not tested this in other environments or systems, any such statements seem to break Chrome's ability to automatically update styles for a page after it was done once.
So to save others time who might stumble upon this: Get rid of your #imports and you'll be good.
The accepted answer of this question contains a good explanation.
I downloaded the minified version of bootstrap and put it in the root directory of my project. Then in a HTML file in /views/ I added:
<link rel="stylesheet" href="/bootstrap.min.css">
However, the page continued to look the same because Bootstrap styles weren't added. I know I can use a CDN, I did and it worked, but for now I want to try including it locally. I tried to similarly include Semantic-UI but it didn't work too. What am I doing wrong?
I think I figured it out. Assuming that you have your stylesheet in /public then you have to add this line to your application file (usually app.js):
app.use(express.static(path.join(__dirname, 'public')));
From now on you can link to your stylesheets from anywhere in the project using this code:
<link rel="stylesheet" href="/bootstrap.min.css">
Note that we no longer have to specify the full path, which is "/public/bootstrap.min.css" - we omit the "/public" (in fact href="/public/bootstrap.min.css" would be an error).
If anybody reading this can explain why the first line is necessary please comment below. I believe I understand what it does but why the Express creators insisted on doing it that way i.e. why can't I <link> to my local files normally is what I don't get.
I've got a very weird issue with my Ember application. I have a style.css file that is (unfortunately) 4030 lines long due to circumstances I cannot change at the moment. It is included in my app/index.html file like so
<link rel="stylesheet" href="assets/style.css">
When I run ember build --prod on my ember app, I get the error: "Ember is not defined". Now here's the strange part: if I copy about 100 lines from the end of the style.css and then paste it to the beginning of the style.css file, then building to production has no problem, and the completed build runs perfectly. Of course, this practice of shuffling around the style.css cannot be continued for long, and therefore I need to find a solution - or at least the cause of this.
I'm asking if anyone has experienced this problem, and if so, what was done to fix it.
So. After researching and trial and error, I've found that the reason this was a problem was because I named my main css file 'style.css', which is a very common name for a .css file. One of my vendor packages (still don't know which one) had a .css file also called style.css, and during compilation, the vendor .css and my app's .css clashed with each other.
Changed the name to 'myCompany_style.css' and everything works fine. Also as per #kumkanillam's suggestion, moved all css compilation to app.css
Will edit answer to include issue link if I can re-find it.
I'm on Debian Jessie, 32bit, editing with gEdit and trying to get BootStrap to work without an internet connexion. I went to getbootstrap.com/getting-started, downloaded the files from the left-most button, extracted the various folders (js, css, fonts) into a folder named bootstrap.
I also created custom.css in the css folder and threw in a line
#qlksjhdf { color:#FF0000;}
Within this folder, I created an HTML file. Then I copied some code from a working example. When I use the CDN links, all works fine, as expected, but when I replace the CDN with local linking such as "css/bootstrap.css", the styling disappears, although the H1 styling in "css/custom.css" works.
Do I need to "install" something or wouldn't just downloading and linking the files suffice ? And yes, I've also downloaded jQuery and linked it locally...
Are you sure that you're using the right file path for the Bootstrap resources. If you put everything in a folder called bootstrap, you should be able to link the css file like this from your index.html:
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
Double check the path you are using to reference the bootstrap files. That is most likely the issue. If everything looks fine, can you add some code to the example or create a JS fiddle with the code you are working with?
Disclaimer: This is my first ever website project, in order to learn about html, css etc. I probably need a 'for idiots' guide'
I have a jekyll/github pages site here. I have read the jekyll documentation here, which suggests all you need to do is stick the liquid tag in. Which I have, for example here.
Further research has pointed out I need to set up my config file, like this which I have here. I also have a .css I copied from a site called sciviews which is here and I've made a link into the .css to call it here.
However, my page still displays in black on white in code blocks. What have I missed?
EDIT: I believe I've made another error, the source of my syntac .css was (i think) here. Is .scss maybe not compatible with this process as I've implemented it?
In your html ( inside the head tag ), you are referencing an incorrect path to "syntax.css"
Change:
<link rel="stylesheet" href="/css/syntax.css" type="text/css">
To:
<link rel="stylesheet" href="/Pokemon_FieldStudies/css/syntax.css" type="text/css">
Edit
Following your edit, it seems the code inside syntax.css is a raw scss file. Such files need to be processed before they could be served to the client.
I suggest you read about SCSS and how to compile it ( A simple google search will yield more than enough tutorials ).
In case you're interested in a shortcut, you can use an online compiler such as http://www.sassmeister.com/ but that will require you to define a value for some of the missing variables defined in the scss file.