So I compiled my SASS into one CSS file using codekit 2 on their own localhost and the website looks perfectly fine.
However when I upload my website onto a webserver (including all my SASS and CSS) it will not show some of my images. Then when I remove the SASS from my server leaving the compiles CSS it looses my fonts as well.
Does anyone know why is this?
Here is the website: http://bubbacue.nathanpatton.co.uk/
And the GitHub Repo for all the files: https://github.com/NathanPatton/Bubbacue
Your web host is generating a bunch of 403 Forbidden and 404 Not Found errors on the assets.
In Chrome, go to View, Developer, JavaScript Console and you'll see a list of the problem files and directories. Here is how to fix it.
Related
sass file can be viewed in web developer tool (style editor) of browser. But if tried to open in new tab of browser get 404 error.
e.g.
website :- https://getbootstrap.com/
scss url :- https://getbootstrap.com/docs/5.0/scss/bootstrap.scss
Can anyone tell me why browser's developer tool can show the contents of scss file but we can't open or download that scss file using url.
You can't see the .scss file because the browser doesn't understand how to display it. .scss is a different thing than .css (which a browser does understand). In order for the browser to know what SCSS is, you need some kind of compiler to output CSS. If you want to get into scss development you should check out a compiler like webpack
https://webpack.js.org/loaders/sass-loader/
or if you just want to check out how its done have a look at codepen & test out some features:)
https://blog.codepen.io/documentation/using-css-preprocessors/
I'm trying to deploy my tailwind site to Netlify. I've been able to deploy it but it only comes out as plain html, no css. My guess is that its because the styles.css is in a src folder but I'm not very sure.
I used tailwind without PostCSS so that could also be a problem.
Any help is appreciated;
Github: https://github.com/JojoDuke/Insure-LandingPage-Design
Site-preview: https://naughty-ptolemy-d0f425.netlify.app/
It looks like your link tags in your HTML aren't pointing to the same location as the output of your tailwindcss build command, causing the CSS to not be pulled through.
Try recloning your repo from scratch, and running the build command you put in your netlify settings, and seeing whether that generates the file in the right location, then update the HTML to match that location.
I'm using Twitter Bootstrap 3.0 on a project. There's a fixed requirement of not hosting any files externally. But when I host the .css and .js files locally, the Glyphicons become corrupted.
Here's what it should look like:
Using bootstrap.min.css from the original CDN issues no errors, but placing the same file on the local server will affect the icons rendering, like in the image below:
It doesn't seem to matter if I download and save the original file using wget, DownThemAll, or open it on Firefox and use the "Save As" feature. It doesn't matter if the <link> href is href="/css/bootstrap.min.css, href="http://www.domain.com/css/bootstrap.min.css or href="http://www.domain.com/bootstrap.min.css.
My dev machine is running Linux. I can only use it to browse the site, both on my dev machine and in production. I'm using Firefox 26, but changing the value of security.fileuri.strict_origin_policy has no effect. As far as I can tell, the only difference that causes the render error is the CSS file location.
The issue happens both on my dev machine and in the live server.
Glyphicons are webfonts loaded from addresses hardcoded in the CDN version of Twitter Bootstrap. The original code is:
#font-face{font-family:'Glyphicons Halflings';src:url('../fonts/glyphicons-halflings-regular.eot');src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/glyphicons-halflings-regular.woff') format('woff'),url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg')}
You have to either edit the CSS or place the font files on the /fonts/ folder. You can obtain both the fonts and the CSS files at the "customize" page.
I have a problem with CSS file, if I browse my application via another machine or through published folder , the CSS file is not getting applied but the same CSS file works fine in machine where the application is set up. The CSS file is not compatible with IE6,IE7, IE9 and firefox. Please let me know how to make it compatiable in all versions.
use relative paths for the css files
I have two different css files... style.css and style_main.css
both are used separately in different layouts for the same application. In development mode everything works fine, but when in production mode, caching happens and both css files are loaded as all.css?xxxxxxx but unfortunately all.css is made from style.css and does not update with the change in layout. how do i prevent this???
When you deploy the code to the production server, you are probably also deploying the all.css file. Have you tried excluding this file from your version control system? When you update style.css etc on your development machine, commit the changes and then redeploy, rails will re-generate all.css if it finds that it isn't already in the public folder.