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
Related
I have a CSS file style.css stored in a CSS folder and tried using <link rel="stylesheet" type="text/css" href="style.css"> to link it into the HTML file. I got a 404 not found error from this and am not sure what I am doing wrong.
Below is the code (there is not much at the moment):
{% extends "base.html" %}
{% block body %}
<div class="MainBody">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="w3-container w3-padding-32 w3-hide-small center-align">
<h1>About Us</h1>
</div>
</div>
{% endblock %}
This shows the full path of style.css within the project
Please let me know what is being done incorrectly.
Actually, you answered your own question:
I have a CSS file style.css stored in a CSS folder
Your href attribute should look something like: href="/css/style.css"
The href should should have the path where the file is located along the file name not only the file name.
Example :
<link rel="stylesheet" type="text/css" href="./css/style.css">
we use "./" to search in the current folder.
we use "../" If you want to come back from the current folder.
Try this:
In the href, would you not leave the first / off? I thought that would go to a root folder. Try and eliminate that first slash and see what happens. As was said, the 404 is because it's looking in the wrong place.
I see this is a structure of a Flask app. In Flask, the CSS files and other assets should by default be stored in the static directory which should be directly inside your home directory.
Your file structure should look like this:
TSAWeb_App
|__ templates
|__ index.html
|__ static
|__ CSS
|__ style.css
Then you to access it inside the web app, first import url_for method
from flask import Flask, url_for
Then you can refer to CSS file as:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='CSS/style.css') }}">
Then when the app is run, the href tag will have the correct value set
UPDATE: If you're using Django, see this doc
Configuring static files
Make sure that django.contrib.staticfiles is included in your
INSTALLED_APPS.
In your settings file, define STATIC_URL, for example:
STATIC_URL = '/static/'
In your templates, use the static template tag
to build the URL for the given relative path using the configured
STATICFILES_STORAGE.
{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image">
Store your static files in a folder called static in your app.
For example my_app/static/my_app/example.jpg.
I have
<link rel="stylesheet" href="/assets/css/my_file.css">
on a simple index page
And this .css file is on _assets/css/my_file.css
But it won't be loaded when I load my page. If I try localhost:4000/assets/css/my_file.css I go to a 404 page.
in jekyll check baseurl in _config.yml
baseurl: "" # the subpath of your site, e.g. /blog
for local development use just empty string like above, then import css like this.
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css">
for images:
<img src="{{ site.baseurl }}/assets/img/logo.svg" alt="logo" class="logo"/>
You'll need to create the assets/css folders in your root directory and save my_file.css in there.
Now it will show in your generated _site folder and is available at http://localhost:4000/assets/css/my_file.css
To include it in your header use
<link rel="stylesheet" href="{{ "/assets/css/my_file.css" | prepend: site.baseurl }}">
and you are good to go.
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>
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'm trying to follow Symfony best practices with keeping general assets stored directly in the /web root. I am trying to set a background image in css which is not loading.
Folder Structure.
web
assets
css
style.css
images
image.jpg
I'm including the style.css file via assetic. I've installed assets with assets:install web --symlink command. I've also tried the assetic:dump command.
#div {
background: url("../images/image.jpg");
}
{% stylesheets filter='cssrewrite'
'assets/css/style.css'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}"/>
{% endstylesheets %}