I am trying to find out, how to get path of my css and js files.
This is my base.html.twig in app/Resources/views/base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
{% block body %}{% endblock %}
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
It cant find my assets, because it is seeking in web/ directory by default. How should my path look like to find the files in app/Resources/views?
thanks!
Try to include stylesheet as below :
{% stylesheets 'css/bootstrap.min.css'
'css/bootstrap-theme.min.css'
filter='cssrewrite' %}
{% enstylesheets %}
Also you should install assets and you can use symlink option to assets:install command. This will make symlink in web folder to your bundle public folders
app/console assets:install --symlink
Without symlink option this task makes copy of files, so your changes doesn't affect.
You should also use assetic:dump command
app/console assetic:dump
Clear the cache as well.
Related
Problem
I have an issue with generating PDFs via Browsershot on a queue. The PDFs do not load any images or stylesheets for some reason however, when generating the same PDF via a browser request the images and stylesheets are loaded as expected.
I suspect the issue is related to the paths used for the images and styles, but I'm not sure beyond that.
The first image shows the expected output, and the second shows what the actual output looks like.
Tried so far
Checked the queue is configured properly
Checked for queue errors
Checked the css/js resources exist on the server
Tried various config settings for Browsershot
Browsershot code
$content = view('site-report.cover-template', ['site' => $this->site])->render();
Browsershot::html($content)
->waitUntilNetworkIdle()
->noSandbox()
->ignoreHttpsErrors()
->setNodeBinary('/usr/bin/node')
->setNpmBinary('/usr/bin/npm')
->margins(0, 2, 0, 2)
->format('A4')
->noSandbox()
->setOption('args', ['--disable-web-security'])
->showBackground()
->waitUntilNetworkIdle()
->save($targetFullPath);
PDF Blade layout
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/pdf.css') }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</head>
[program:test_worker]
command=/RunCloud/Packages/php81rc/bin/php /RunCloud/Packages/php81rc/bin/php /server/path/laravel/artisan queue:work database --queue=default --sleep=3 --tries=3 --timeout=1000000
redirect_stderr=true
autostart=true
autorestart=true
user=runcloud
numprocs=2
directory=/
process_name=%(program_name)s_%(process_num)s
null
Any help would be much appreciated!
I´m trying to link bootstrap css to my Laravel proyect using
or in my view but it not working.
In scss class I tried this:
#import 'node_modules/bootstrap/scss/bootstrap' or #import '~bootstrap/scss/bootstrap';
In view class I tried this:
<!--<link rel="stylesheet" type="text/css" href="css/app.css"/>-->
or <link rel="stylesheet" type="text/css" href="{{url('css/app.css')}}"/>
My scss class looks like this:
#import url('https://fonts.googleapis.com/css?family=Nunito');
#import 'variables';
#import '~bootstrap/scss/bootstrap';
//#import 'node_modules/bootstrap/scss/bootstrap';
#import 'custom';
They show any errors, but it don´t load the bootstrap styles
First of all, you'll to go to your prompt and type
npm install bootstrap#4.1.0
Then, in your bootstrap.js file, inside the try statement, type this:
require ('bootstrap');
In your app.scss file
#import '~bootstrap/scss/bootstrap';
Run:
npm run dev
In your view
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}"></script>
looking at your description, you only need to run npm dev
npm run dev
and add in any .blade.php file
in head tag:
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
in body tag:
<script src="{{ asset('js/app.js') }}"></script>
Im learning Symfony and trying to set up a boilerplate app in Symfony 4
This Symfony document describes how to include assets in your page, namely using the asset package like so..
<img src="{{ asset('images/logo.png') }}" alt="Symfony!" />
<link href="{{ asset('css/blog.css') }}" rel="stylesheet" />
I have installed this package and trying to link to a css file in my /public directory.
I know Symfony recommends placing assets in an /assets folder at the root, but I would like to avoid this if possible. It makes more sense to me to place assets in the public directory.
My Twig base template is as follows:
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
<link href="{{ asset('public/css/main.css') }}" rel="stylesheet" />
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
<footer>footer</footer>
</html>
Problem
When I load the route/page/template, the linked css is rendered as a simple link from the root (as if Im linking it as <link href="public/css/main.css" rel="stylesheet" /> - there is of course no route set for public/* and this returns 404/Not Found.
Its as if the asset() function is not even used.
Ive tried
Restarting my local Symfony server
moving the asset to an assets folder at the root at adjusting the link accordingly
verifying that the asset package was installed (it is)
googling this issue (nothing for Symfony 4)
Questions
How can I let Symfony know that the public/* path is a filesystem path to assets, NOT a URL route, and include my assets successfully?
Is there such a feature to set a default location for assets other than the recommended /assets folder at the root?
Paths in the asset function should be relative to your public directory, not the project root.
So, pretending your server's docroot is public_html, and an asset is in public_html/css/main.css, the asset call would be {{ asset('css/main.css') }}.
Additional note: The asset function doesn't give you the ability to put assets outside the public directory. They must be in the public directory.
Firstly maybe you have to add the asset functionality to Symfony:
composer require symfony/asset
Then you should to use in Twig temlate the relative path to your public directory:
<link href="{{ asset('css/style.css') }}" rel="stylesheet" />
for the public/css/style.css style file.
BTW it is also works for Symfony 5.
Check if webpack is watching files ... (yarn watch) After hours of searching for an answer one of my project team members asked if I had that running ={ Worked immediately after that.
I have a question about symfony2 assetic. The next situation in project:
We got a themes of project, themes must be stored in one folder. Now it's in:
/
/src
/Dwd
/FrontendBundle
/Resources
/themes
/default
/css
reset.css
style.css
/img
img.png
layout.html.twig
/not_default
/css
reset.css
style.css
/img
img.png
layout.html.twig
and i have the problem of including the styles and images from styles (cssrewrite) filter from theme
In layout.html.twig the next code:
<html>
<head>
{% stylesheets 'bundles/dwdfrontendbundle/css/*' filter="cssrewrite" %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
</head>
<body>
</body>
</html>
And when I do "php app/console assets:install" assetic don't install styles from Dwd/FrontendBundle/Resources/themes...
So my question is How i can add this path or include this css files in layout.html.twig of any file?
p.s. We extend this layout in /views templates trough adding include path to twig.loader service, like {% extends 'layout.html.twig' %}.
I am following a tutorial for symphony 2 but cant get the style sheet to load all I get is a 404.
I have tried also adding it into the route but I get a permission error on the style sheet.
app/Resources/views/base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />
<title>{% block title %}symblog{% endblock %} - symblog</title>
{% block stylesheets %}
<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
I have added the style sheet into app/Resources/views/web/css/screen.css
Any ideas why this is not working? Tutorial
You put css files in a wrong directory.
It should be web/css/screen.css instead of app/Resources/views/web/css/screen.css
I also suggest you to use assetic instead of manually put css and js to the web directory. These articles might help (take a look at the assets:install command):
How to Use Assetic for Asset Management
Linking to Assets
Including Stylesheets and JavaScripts in Twig
Projects assets (resources from your app/ folder) are ignored by assets:install command. Only resources from bundles will be copied into the web/ folder automatically.
You should place your app (project) resources directly in the web/ folder.
http://symfony.com/doc/current/cookbook/assetic/asset_management.html
By the way: ONLY the web/ folder is public.
Look at the rendered source code of your html in the browser and you will see that your css file is prefixed with a web/. This is what the asset() command does