Advertisement
Advertisement


Using CSS in Laravel views?


Question

I've just began learning Laravel, and can do the basics of a controller and routing.

My OS is Mac OS X Lion, and it's on a MAMP server.

My code from routes.php:

Route::get('/', function() {
    return View::make('home.index');
});

Route::get('businesses', function() {
    return View::make('businesses.index');
});

Route::get('testing', function() {
    return View::make('testing.index');
});        

Route::get('hello', function() {
    return "<h3>Hello world!</H3>";
});

That works, the views display perfectly, ''however'' what I want to try and do is include CSS within the views, I tried adding in a link to a stylesheet within the directory but the page displayed it as the default browser font even though the css was in the HTML!

This is index.php from businesses within the views folder:

<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<p>Business is a varied term. My content here.

I tried using the Blade template engine in my other views folder (testing) to display CSS but again the CSS did not show despite it being in the testing folder!

How can I overcome this problem, and get better - as I'm slowly learning this framework.

2017/11/07
1
110
11/7/2017 10:58:52 AM


Put your assets in the public folder

public/css
public/images
public/fonts
public/js

And then called it using Laravel

{{ URL::asset('js/scrollTo.js'); }} // Generates the path to public directory public/js/scrollTo.js

{{ URL::asset('css/css.css'); }}   // Generates the  path to public directory public/css/css.css

(OR)

{{ HTML::script('js/scrollTo.js'); }} // Generates the  path to public directory public/js/scrollTo.js

{{ HTML::style('css/css.css'); }} // Generates the path to public directory public/css/css.css
2015/12/01

your css file belongs into the public folder or a subfolder of it.

f.e if you put your css in

public/css/common.css

you would use

HTML::style('css/common.css');

In your blade view...

Or you could also use the Asset class http://laravel.com/docs/views/assets...

2012/11/17

You can also write a simple link tag as you normaly would and then on the href attr use:

<link rel="stylesheet" href="<?php echo asset('css/common.css')?>" type="text/css"> 

of course you need to put your css file under public/css

2012/11/17

We can do this by the following way.

<link href="{{ asset('/css/style.css') }}" rel="stylesheet">

{{ HTML::style('css/style.css', array('media' => 'print')) }}

It will search the style file in the public folder of Laravel and then will render it.

2017/02/13

Like Ahmad Sharif mentioned, you can link stylesheet over http

<link href="{{ asset('/css/style.css') }}" rel="stylesheet"> 

but if you are using https then the request will be blocked and a mixed content error will come, to use it over https use secure_asset like

<link href="{{ secure_asset('/css/style.css') }}" rel="stylesheet">

https://laravel.com/docs/5.1/helpers#method-secure-asset

2016/08/18