Loading assets from *.blade.php in Laravel - laravel-5.4

Laravel 5.4 here.
I added test.css file under public/css/ and then made a call in my layout.blade.php like this:
<link href="{{ asset('css/test.css') }}" rel="stylesheet">
but the asset does not get loaded.
My problem is that i am trying to run css for jquery-ui. I downloaded jquery-ui-bundle via npm and then required it in resources/assets/js/bootstrap.js. Widget works, but the calendar shows up without styles. So i try to add styles manually by referencing them directly through the template. Unfortunately, this doesn't help.


You can directly put js/CSS into your public folder if they don't require compiling first (which is in your case) - There is no harm in that
But if you want to go as per recommendation:
Pull library using NPM,
Add js/CSS into gulpfile.js which you want to copy to the public folder:
elixir((mix) => {
mix.sass('app.scss')
.webpack('app.js')
.mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');
});
https://laravel.com/docs/5.4/mix#copying-files-and-directories
Run npm run command
And then include into your blade view like:
<link href="{{ asset('css/bar.css') }}" rel="stylesheet">


For simplicity, you can just simply copy source file to public\css or public\js and link it to your project file. In other words, link
rel="stylesheet" type="text/css" href={{asset('css/bootstrap.css')}}

Related

my html and css not linking when using 'url_for'

I am creating my first project in web application using python flask.
Now I'm working with my html, but my css is not linking to my html when running with flask.
code when linking the css:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main_layout.css')}}">
file directory:
Project
├───static
├───main_layout.css
└───templates
├───layout.html
├───main.py

Try this:
filename=‘../static/main_layout.css’
It looks like you are looking for the file in the same directory as the html file. You need to back out one directory and move into the static folder with the link above.

Jekyll asset folder not created

I am trying to learn how to use jekyll so i can create some sites and host them on github pages... But i am having a problem following the tutorial on the jekyll website, The css folder in the assets directory is not being created when i run jekyll build or jekyll serve, i have even tried bundle exec jekyll build and clean.
I have tried a few things still cant find a solution.
The github repo for my code is at https://github.com/blaze4dem/timiking please help me understand what i am doing wrong here.. Thanks in advance.

First, you're storing your scss in _assets/css, which as an underscored folder is ignored by jekyll.
Move it to assets/css folder, with no underscore. It will then be generated.
The second problem is how you call your generated css in _layouts/home.html.
<link rel="stylesheet" type="text/css" href="/assets/css/style.scss">
Requested from your index page at http://127.0.0.1:4000/timiking/, it resolve to http://127.0.0.1:4000/assets/css/style.scss then 404.
Simply use your baseurl :
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/style.css">

How to write relative path?

I have two folders. One called app, which contains index.html, sass, img. And second build with folders: css, js. What path should I type in index.html to access the style.css file, which is in build/css/style.css ? I tried this, but it doesn't work.
<link rel="stylesheet" type="text/css" href"build/css/style.css">

Your css and js folders should be in same directory as the app where index.html is then try css/style.css
<link href="css/style.css" rel="stylesheet">
So app, which contains index.html, sass, img , should now also contain js and css folder. Then it should definitely work.
If keeping the file directory as is, you should understand.
*Starting with / returns to the root directory and starts there then ../ moves one directory backwards and starts there and so on ../../. In that case
<link href="../build/css/style.css" rel="stylesheet"> should work.

Include this in your html file:-
<link rel="stylesheet" type="text/css" href="../css/style.css">

If your both folder 'app' and 'build' are siblings then use this
<link rel="stylesheet" type="text/css" href="../build/css/style.css">

You should change it become
<link rel="stylesheet" type="text/css" href"../build/css/style.css">
Your index.html is on "app" folder and the css is on "another folder" which have the same path with "app" folder. So you need to get out from the "app" folder first with "../" then redirect it into your destination folder. If you need to get out from current folder you're in twice it'll be like "../../your/destination/folder" and coulde be more.

<img src="picture.jpg">
picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg">
picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg">
picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg">
picture.jpg is located in the folder one level up from the current folder

Relative path is relative to the file where you put the reference. Here in your case, style.css is in build/ folder which is next to app folder that covers index.html. So if you want to make a reference to style.css from within index.html, usually you should use the relative path ../build/css/style.css.
But make sure the css file is really reachable. It depends on whether you are using a web server, what web server you are using, and what is the starting point from which you run your project.
If you simply open index.html by clicking the file from file explorer, then you can use this to make style.css work:
<link rel="stylesheet" href="../build/css/style.css">
However the above method is not recommended. Normally you will want to make use of a web server to serve such static files like js, css.
I would recommend you to try lite-server which is a light weighted web server let allow you to do local development and checkout what you've been done immediately by visiting something like http://localhost:8000.
When you are using a web server to serve static files, make sure you start running it with a starting point that already covers app and build folders (such that all of the files you want are reachable), for instance, with the parent folder of those 2 folders. If so, when you want to open index.html, you are going to visit something like http://localhost:8000/app/index.html (Because index.html lies under app/ folder, you need to add the "app/"). When this layout is applied, you have at lease 2 ways to insert the css lines:
<link rel="stylesheet" type="text/css" href="../build/css/style.css">
or
<link rel="stylesheet" type="text/css" href="/build/css/style.css">
What if you don't want to add the "app/" while visiting index.html? Then you could move index.html out of app folder, right into the project starting point. That way whenever you go to http://localhost:8000, usually index.html is assumed to be served. (Just like visiting http://localhost:8000/index.html). When you are using that method to run your project, the reference to style.css is just the way you were doing, which is:
<link rel="stylesheet" type="text/css" href="build/css/style.css">
By the way, this is also perfectly fine in that case, with an absolute path:
<link rel="stylesheet" type="text/css" href="/build/css/style.css">
Things will go different if you are using other mechanisms to serve static files like css, js. But the core principle is that simple: make sure files you want can be reached, and the relative path you are using really reveals the path relation between the reference point and the target referenced file.

Angular/Rails App Loading Blank CSS Stylesheet

In the app I just started I'm having trouble getting my CSS stylesheet to load. I'm used to using the asset pipeline with rails, but I'm trying to use angular for the front end, which has taken everything out of the asset pipeline.
I have the css file in public/app/styles/style.css and am referencing it in my index.html with:
<link rel="stylesheet" href="app/styles/style.css">
I have images linked successfully with src=app/assets/images/... and if I look in the sources tab on the developer console the file does show up, it just appears to be empty.
Can anyone see where the disconnect is?

From what I can see with the code, your tag could use a 'type' attribute, but that wouldn't stop it from working.
The URL in the link is 'app/styles/style.css', I assume your index.html file is in the 'public' folder?
I'd reality check the URL to ensure it's pointing right to the style.css file, and update the to use the full HTML5 format, which is:
<link rel="stylesheet" type="text/css" href="app/styles/style.css">

How to serve static html pages with Rails?

I have Rails application with documentation which is static html pages in the /public folder.
The tree of my public folder:
-public
-docs
-intro
introduction.html
-css
some.css
index.html
Index.html file is:
<link rel="stylesheet" href="css/some.css" type="text/css" />
Some of the text
<li>href="intro/introduction.html"><em>Introduction</em></a></li>
When I open index page css isn't loaded, and when I try to click on link it says routing error. As I understood static pages don't know where to look for css and other html pages.
I just want static pages without any routes and controllers, nginx.
Any ideas?

All the public folder content is accessible via "/"
<link rel="stylesheet" href="/docs/css/some.css" type="text/css" />
You can use high_voltage gem to generate static_pages

Its perfectly valid to serve static files (pages or not) via the public directory. As Kirka121 said rails is not really built for this purpose but can still work with it.
In development environment it should just work to serve whatever files you have in public, for production environment you might need to configure whatever server you use to serve them - but this should be covered by its normal setup anyway, if not its set up wrong.
So by default the rails public folder can directly by accessed at the root of the project.
As far as your code goes the relative links/urls seem to be the issue. Its generally better to use absolute paths for everything not to confuse anything, which leads to very hard to find bugs.
With your folder structure and example this would be:
<link rel="stylesheet" href="/docs/css/some.css" type="text/css" />
Some of the text
<li><em>Introduction</em></li>