Handle .css files in Laravel

Question

Handle .css files in Laravel

Navigation

#1 by (3 votes)
#2 by (0 votes)

-1

You see, I have a file named estilos.css with the following code:

div{background-color: #000000;}

I have stored it in the public / css directory, and now the story is how I pass it to the views. I tried to put it like this:

<link rel="stylesheet" type="text/css" href="/public/css/stilo.css" />

But I have not achieved results. How would it be right?

More details: I have a styles.css file with the following code:

body{
    color: red;
}

And I put it inside the tag " head " in app.blade.php:

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

Next, I enter " body " the following code:

style="color:red"

Here, on the other hand, if it works. Let's see what I'll be doing wrong.

html css laravel laravel-5

asked by Miguel Alparez 20.02.2018 в 21:13

source

2 answers

SQL Queries related tables Oracle [closed] Functions void in c # in which cases I should apply it

score 3 · Answer 1

If you're not using Laravel Collective , then you can use one of Laravel's helpers, by the way, you do not need to attribute type , we are already in HTML5.

Personally I prefer to use the helper asset () for calls to static resources:

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

However, it should normally work even without the helper, although it really is best practice with the previous helper:

<link rel="stylesheet" href="css/stilo.css" />

score 0 · Answer 2

You should always use absolute paths for loading resources such as CSS, JS and images, however this may not work if you are developing locally because it will depend on the configuration of the environment you use, if you have configured virtual domains, etc.

Laravel is named asset to each of the mentioned resources, from the public directory, and they are loaded without problems, regardless of the environment where is the application, if we use the function of the same name. So we have to:

Load a stylesheet:

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

Upload an icon (for browser favorites):

<link rel="icon" href="{!! asset('favicon.ico') !!}" type="image/x-icon">

Load JS library:

<script type="text/javascript" src="{!! asset('js/api.js') !!}" async></script>

Upload an image:

<img src="{{ asset('imagenes/foto.JPG') }}" alt="mi foto">