I have run into a strange issue only recently and scratching my head trying to figure this out.
When compiling (saving) changes in a *.scss file, the outputted css file has its permissions change. So when previewing the page in a browser the global.css file cannot be read and the error message returned is as follows :
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head>
<title>403 Forbidden</title>
</head>
<body>
<h1>Forbidden</h1>
<p>You don't have permission to access /styles/global.css
on this server.</p>
</body>
</html>
This is when looking at the file global.css via Firebug.
Using terminal I can change the file permissions with something along the lines of:
sudo chmod -R 775 htdocs
Then things work fine until I do a recompile. And the file permission properties changes again.
I have tried many things to fix this issue with no success :
These include
compass clean
and accessing MAMP and changing my permissions this way. I have also tried deleting the folder and starting again a new. I have uninstalled compass and sass and reinstalled, and still the issue exists.
Also as a note the scss permissions don't change but only the compiled css file. I don't know if this helps?
Related
I'm getting crazy with this matter and seems i can't find a solution.
I started a laravel project and i'm unable to get the css working correctly.
I have created a new file named style.css in my resources/css, than i have linked that file to my app.css with #import 'style.css';.
The app.css is linked in my app.blade.php with <link href="{{ asset('css/app.css') }}" rel="stylesheet">
Everything seems fine to my eyes, but the css in style.css doesn't work.
I've tried any solution that i know, and also looked several web pages and other older projects done but everything seems correct, probably is just because i'm really tired.
Does any one can help me to solve it?
Thank you
The path of the method asset() ends in the public folder
you need to compile app.css by run this command "npm run dev"
if don't install npm before run "npm install" first
I created a new project using Laravel 5.5 and I am trying to link my CSS but it does not work. When I put some CSS codes nothing happens to my page. I already tried clearing my cache. I do not know whats wrong, please help. Here is how I linked my css in my app.blade.php
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
Here is my css code:
body{
background-color: black;
}
Any help would be appreciated. Thanks.
If you put the css inside a css file in your resource folder, you need to build it with NPM:
npm install
then
npm run watch
If you directly put it in the public folder, have you checked to make sure you're linking the right file? Also, try ctrl + f5 to hard refresh
The file style.css must be there in the required location. By default it will be:
/public/css/style.css
Otherwise if you have changed the resource path to your web server root, then it could be:
/css/style.css
Situation
Use bower In .bowerrc
In bowerrc set directory vendor/assets/bower_components
In config application.rb I typed config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
Install gallery plugin called «fotorama», do it by bower
All files of plugin «fotorama» now storage in this directory "/vendor/assets/bower_components/fotorama"
In manifest css file application.css I type *= require fotorama/fotorama.css
In layout file I typed <%= stylesheet_link_tag "application" %>
Starting server rails server — everything is ok. In source of generated page I see <link href="/assets/fotorama/fotorama.css?body=1" rel="stylesheet" />. This css file has this line .fotorama__video-play {background: url(fotorama.png) no-repeat}, and many other lines where uses url for file "fotorama.png", and it is ok, browser try to find this png file near the css file, and successfully do it.
Stop server, precompile all essets rake assets:precompile, and then run server in production environment rails server -e production
Problem
In production, all my css files concatenated, and in source of page it looks like this <link href="/assets/application-2d31fc33890d01b046194920367eb3d4.css" rel="stylesheet" />, and still this file has this line .fotorama__video-play {background: url(fotorama.png) no-repeat}. Now browser trying to find png file here http://localhost:3000/assets/fotorama.png, but it isn't here, it isn't anywhere, because, I don't know why, there is no "fotorama.png" in "public/assets" folder.
Questions
Why pictures didn't transport from "/vendor/assets/bower_components" to "public/assets"
Have you got an idea, what can I do to solve my problem? Important, that I don't want to change urls in css manually, programatically — ok.
Excuse me for my english, and thanks for everybody who going to help me.
Solution and answers
Only files from "app/assets" transports to "public/assets" by default. To transport images from "/vendor/assets" type in "application.rb" this code config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
Task for gulp: if you see some changes in "bower.json", take all main files of bower components by npm moudle called "main-bower-files". Generate a manifest file with each css file with .erb extension, and save it "app/assets/stylesheets/bower_components_manifest.css"
This task continue: in every main css files, by npm module called "gulp-css-url-adjuster", add before every url <%= asset_path ' plus path to directory, and after ' %>. url("fotorama.png") >> url("<%= asset_path 'fotorama/fotorama.png' %>"). Add .erb extension and save.
In "app/assets/stylesheets/application.css" I add * require bower_components_manifest.
One of the other solutions, use gem "bower-rails". But I don't like it, because in some plugins in bower I need override some "main" files, and gem "bower-rails" can't do this, npm "main-bower-files" can. And I like to save my workflow for everything what I have done before start include my code to rails, gulp, bower.
I just downloaded the semantic CSS and was running the examples but saw the following error on Firefox
Access to restricted URI denied
file:///C:/semanticcss/examples/fixed/fixed.less
Below is the code in the example page
<!-- Stylesheets -->
<link rel="stylesheet" href="fixed.less" type="text/less" media="screen" />
<!-- Scripts -->
<script src="../../js/less-1.1.3.min.js" type="text/javascript"></script>
How can I get rid of this error?
This is on purpose. Local files may only read other local files in the same directory or sub-directories.
See https://developer.mozilla.org/en/Same-origin_policy_for_file%3a_URIs
Try
[sudo] npm install less -g
Then it shouldn't have any problems with the directories. My system (MBP) did the same thing until I did this. The main problem was that it doesn't know where the LESS compiler is located. You will more than likely need root privileges to run the command, hence [sudo] is system dependent.
Hope this helps.
this is a newbie question for you guys.
In file
/home/myhome/apache-tomcat-6.0.29/webapps/view/test.jsp
I have <link rel="stylesheet" type="text/css" href="WEB-INF/resources/view.css"/>
and the view.css file is located at
/home/myhome/apache-tomcat-6.0.29/webapps/view/WEB-INF/resources/view.css
For some reason, it's not loading the css file. But when I put the css file in the same directory as the jsp page and change href accordingly, it worked. What did I do wrong in my attempt to load the file from another folder?
Thanks alot.
try
Firebug, to debug if path is correctly loaded or not. As i can see it issue with path so you have to debug.
http://www.ehow.com/how_2221659_debug-css-firebug.html
But you can try with this line instead
<link rel="stylesheet" type="text/css" href="/view/WEB-INF/resources/view.css" />
Since I am using tomcat, I guess tomcat just won't let a page access anything in the WEB-INF folder, I moved the file else where not in WEB-INF, it worked...