I would like to know, why on fresh Laravel install, the following code does not link Bootstrap CSS file with the blade.php file, this is what I believe the correct code to make it work:
<link href="{{ asset('public/css/app.css') }} rel="stylesheet"/>
The only way I made it work was this way:
<link rel="stylesheet" type="text/css" href="/public/css/app.css">
However I want to do it with asset, so I would like to know what is the proper way.
You can use one of the following options:
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" >
OR
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet" type="text/css" >
NOTE: This will work if your directory structure is like this: /public/css/app.css
It looks like you are trying to access the bootstrap CSS file from the public folder but by default, there is not one until you have placed it.
Also when you are using the app.css file then everything is working because it is a compiled CSS file which is a combination of bootstrap, font awesome and other CSS files. Laravel kept these files if you are using VueJs with laravel.
you need to perform:
npm install bootstrap
wait and then perform:
npm run dev
it will compile sass with all dependency file into app.css and app.js
and then you need to include it into any blade.php file
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}"></script>
Related
I have called my css like this <link href="{{ URL::asset('/assets/css/app.min.css') }}" id="app-style" rel="stylesheet" type="text/css" />
There is id on tag css. this css successfully called the directory if my url site no sub domain like laravel.test/example. but the css fails to call if my url site like laravel.test/example/example2..
If i remove that id.. it work on all sites. but i need that id because its making some feature like change light/dark mode layouts.
So id='app-style' is going to file app.js.
In app.js there is s("#app-style").attr("href","assets/css/app-dark.min.css"). app-dark.min.css is failure to call..
It will be easy if i can use blade on javascript.
I think you should use
asset() helper function but I'm not sure:
<link href="{{ asset('./css/app.min.css')}}" rel="stylesheet">
In your blade you can check if something is or not. The you can include a condition to make the switch. Something like that:
#php
$hasDarkMode = true;
$link = $hasDarkMode ? 'app-dark.min.css' : 'app.min.css';
#endphp
<link href="{{ URL::asset('/assets/css/' . $link) }}"
rel="stylesheet"
type="text/css" />
But it probably makes the most sense to make the condition on the href attribute.
I decided to answer my own question. Because id='app-style' is going to file app.js and there is some code to call other css..
i just need to change my app.js from asset to app.blade.php on view and set it on main layout.
now i can change directory structure from blade. s("#app-style").attr("href","assets/css/app-dark.min.css") to s("#app-style").attr("href","{{ asset('assets/css/app-dark.min.css') }}")
This is a weird problem. On my login page the CSS will always load correctly.
But once i sign in to my application and get redirected to the dashboard, the CSS will almost always fail to load the first time although when i press F12 to see in the network tab if the CSS files are loaded; they are.. After some inactivity when i refresh the dashboard again the CSS may fail to load although the network tab sais it did load properly..
All CSS files exists and the HTML looks like this in the view:
{{-- CSS --}}
<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('css/font-awesome/fontawesome.css') }}">
<link rel="stylesheet" href="{{ asset('css/font-awesome/solid.css') }}">
<link rel="stylesheet" href="{{ asset('css/font-awesome/regular.css') }}">
<link rel="stylesheet" href="{{ asset('css/choices.css') }}">
<link rel="stylesheet" href="{{ asset('css/common.css') }}">
<link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
#stack('css')
I have also tried to clean the browser cache with no luck.
Also i tried to composer dump-autoload, i don't know if that would help in any way but i tried it.. What could be causing this?
I have 2 images for reference.
The first one is when this weird error happens and the other one is how it looks just after i refresh it.
My project is built on :
Symfony / Webpack Encore bundle
webfonts-loader
Running a Lighthouse audit, the first opportunity to improve performances is :
Consider using <link rel=preload> to prioritize fetching resources
that are currently requested later in page load
...fonts/app.icons.e5d7e11....woff
How can I automatically insert Link tag with rel="preload" to this file ?
If you can use the latest Webpack Encore, this is directly supported via webpack_encore.yaml, simply set preload:true under the webpack_encore: key. You can use the standard helper methods in this case.
Example:
{{ encore_entry_link_tags('my_entry_point') }}
{{ encore_entry_script_tags('my_entry_point') }}
Source: https://github.com/symfony/webpack-encore-bundle
However, if you have an older version of Encore, you will need to install web-link composer require symfony/web-link as suggested in another answer, and manually iterate the webpack files using the encore file helpers, instead of the typical encore tag helpers.
Example:
{% for file in encore_entry_css_files('my_entry_point') %}
<link rel="stylesheet" href="{{ preload(asset(file), {as: 'style'}) }}">
{% endfor %}
{% for file in encore_entry_js_files('my_entry_point') %}
<script src="{{ preload(asset(file), {as: 'script'}) }}"></script>
{% endfor %}
The Encore bundle automatically installs and configures the Asset component (if using Symfony Flex), after which you can use asset() to retrieve the versioned fonts file.
Assuming that you configured Webpack Encore to generate files to public/build/:
// In base.html.twig <head>:
<link rel="preload" href="{{ asset('build/fonts/some-font.woff2') }}" as="font" crossOrigin="anonymous" />
This will result in the following tag being rendered:
<link rel="preload" href="/build/fonts/some-font.6f75f467.woff2" as="font" crossorigin="anonymous">
Internally, asset() uses the manifest.json that Webpack generates.
You can use the preload twig function from the symfony/web-link package.
First, install the package with
composer require symfony/web-link
then, in your code, for example:
<link rel="stylesheet" href="{{ preload('/app.css', { as: 'style' }) }}">
Source: https://symfony.com/doc/current/web_link.html
I'm a little bit new, but I was curious about changing the name of my main file in my css folder. I have the css folder, where I am importing my partials.
I initially tried to call this base.css and add the following line in my head.html (in my includes directory).
<link rel="stylesheet" href="{{ site.baseurl }}css/base.css">
However, it still would not load the appropriate main css file. Instead, I had to rename my file to main.css. there has to be a way around this but I wasn't sure and the literature wasn't that helpful.
Thanks so much! I would really appreciate any help.
Starting from Jekyll 3.3, you can use the relative_url filter to avoid adding baseurl, it should be available for GitHub Pages very soon.
<link rel="stylesheet" href={{ "/css/base.css" | relative_url }}>
You can use the prepend option instead:
<link rel="stylesheet" href="{{ "/css/base.css" | prepend: site.baseurl }}">
If you are using Github Pages then ensure that config.yaml includes the base.url variable and it points to your repository name, e.g:
baseurl : '/my-awesome-jekyll-site'
I am trying to make a simple website using Python and Flask. Right now, I have the HTML and CSS finished, but my page does not show any of the CSS. My files are in the following hierarchy:
/static
/static/css/style.css
/static/js/skel.js
/templates
/templates/index.html
I have the following code in my html file:
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/config.js"></script>
<script src="../static/js/skel.min.js"></script>
<script src="../static/js/skel-panels.min.js"></script>
<noscript>
<link rel="stylesheet" href="../static/css/skel-noscript.css" />
<link rel="stylesheet" href="../static/style.css" />
<link rel="stylesheet" href="../static/css/style-desktop.css" />
</noscript>
When I run this, the terminal displays "304" for the JS files and gets them from "/static/js/skel.js" which I think is correct, but it then displays "404" for the CSS files and gets them from "/css/style.css". I am not quite sure why this is happening - shouldn't this be retrieving files from /static/css/style.css? How can I fix it?
Thanks for the help.
Your on-disk layout is not the same thing as the routes served by your Flask site. Do not rely on the relative paths between templates and static.
Instead, have Flask calculate the routes to static files for you, using the url_for() function in your Jinja template:
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/config.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel-panels.min.js') }}"></script>
<noscript>
<link rel="stylesheet" href="{{ url_for('static', filename='css/skel-noscript.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style-desktop.css') }}" />
</noscript>
If the template is really what you have, and your layout is really what you list, then they don't match:
/static/css/style.css
does not match
<link rel="stylesheet" href="../static/style.css" />
Instead you should have
<link rel="stylesheet" href="../static/css/style.css" />
or move style.css up one folder. Note however that IIRC you can't have ../ in path, because static folder is supposed to be at same level as your flask app script. So you should be able to just have
<link rel="stylesheet" href="static/css/style.css" />
but as others have mentioned it is better to have flask generate the url for you via url_for (see example in step 6 of tutorial).
I had the same problem. This solved it:
open your config.js and add static/ in front of the css/... in all links like href="css/style.css" that they look like href="static/css/style.css" and it should be fine.
The question is already 5 months old but I hope I can help someone who has the same problem.