Discussion :

[MInfo25]

Bonjour

J'ai cherché sur google comment intégrer un template bootstrap sur symfony 4.1, et je ne trouve rien. J'aimerais savoir où stock t-on les fichier du template dans le projet bootstrap ?

Merci de votre aide ?

[kevin254kl]

Bonjour,

Dossier template après pour l'intégration du css avec les assets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link href="{{ asset('build/css/app.css') }}" type="text/css" rel="stylesheet" />

si ton fichier css est dans app/template/build/css.

[MInfo25]

Voici en dessous le contenu de mon template boostrap :


Svp où devrais-je ajouter ces dossiers et fichier dans mon projet symfony ?

Voici les liens d'appel aux styles dans le code html du template:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- Bootstrap core CSS -->   
 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
 
    <!-- Custom fonts for this template -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
 
 
    <!-- Custom styles for this template -->
    <link href="css/clean-blog.min.css" rel="stylesheet">
 
<!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
 
    <!-- Custom scripts for this template -->
    <script src="js/clean-blog.min.js"></script>

[kevin254kl]

Bonjour,

les pages html dans le dossier template
le css et js et image dans le dossier public.
Pour le bootstrap la doc https://symfony.com/doc/current/fron...bootstrap.html
Le plus simple je pense est de prendre le fichier bootstrap.min.js et css et de le metrte dans le dossier public.

[MInfo25]

Bonjour

Aidez-moi svp je ne trouve toujours pas la solution j'ai mis mes fichiers de styles dans public/build mais le style n'est toujours pas appliqué à mes vues.
Voici mon écran :

[kevin254kl]

Avez-vous installé le composent asset, on peut voir le composer.json?
https://symfony.com/doc/current/components/asset.html[

Penser à vider le cache dans le dossier var.

[MInfo25]

Voici mon fichier composer.json et j'ai egalement vidé le cache et toujours pas le style intégré:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
{    "type": "project",
"license": "proprietary",
"require": {
        "php": "^7.1.3",
"ext-iconv": "*",
"erusev/parsedown": "^1.7",
"ezyang/htmlpurifier": "^4.9",
"sensio/framework-extra-bundle": "^5.1",
"symfony/asset": "^4.1",
"symfony/console": "^4.1",
"symfony/expression-language": "^4.1",
"symfony/flex": "^1.0",
"symfony/form": "^4.1",
"symfony/framework-bundle": "^4.1",
"symfony/lts": "^4@dev",
"symfony/monolog-bundle": "^3.1",
"symfony/orm-pack": "*",
"symfony/process": "^4.1",
"symfony/security-bundle": "^4.1",
"symfony/serializer-pack": "*",
"symfony/swiftmailer-bundle": "^3.1",
"symfony/twig-bundle": "^4.1",
"symfony/validator": "^4.1",
"symfony/web-link": "^4.1",
"symfony/webpack-encore-pack": "^1.0",
"symfony/yaml": "^4.1",
"twbs/bootstrap": "4.1.1",
"twig/extensions": "^1.5"
},
"require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.0",
"symfony/debug-pack": "*",
"symfony/dotenv": "^4.1",
"symfony/maker-bundle": "^1.0",
"symfony/profiler-pack": "*",
"symfony/test-pack": "^1.0",
"symfony/web-server-bundle": "^4.1"
},
"config": {
        "preferred-install": {
            "*": "dist"
},
"sort-packages": true
},
"autoload": {
        "psr-4": {
            "App\\": "src/"
}
    },
"autoload-dev": {
        "psr-4": {
            "App\\Tests\\": "tests/"
}
    },
"replace": {
        "symfony/polyfill-iconv": "*",
"symfony/polyfill-php71": "*",
"symfony/polyfill-php70": "*",
"symfony/polyfill-php56": "*"
},
"scripts": {
        "auto-scripts": {
            "cache:clear": "symfony-cmd",
"assets:install %PUBLIC_DIR%": "symfony-cmd"
},
"post-install-cmd": [
            "@auto-scripts"
],
"post-update-cmd": [
            "@auto-scripts"
]
    },
"conflict": {
        "symfony/symfony": "*"
},
"extra": {
        "symfony": {
            "allow-contrib": false
}
    }
}

[kevin254kl]

Dans la console de débogage chrome ou firefox


Vous avez un code erreur 404 peut_on avoir une copie d'écran?

[MInfo25]

Voici l'écran de débogage, apparemment les fichiers ne sont pas chargés et je ne sais pourquoi !

[kevin254kl]

Plutôt l'onglet réseau de la fenêtre, pour voir si le problème vient de l'asset ou du fichier.

[MInfo25]

[kevin254kl]

Logiquement vous avez l'url complète dans l'onglet réseau pour les fichiers qui non pas était trouvé, j'aurais prit l'url puis remonter d'un cran par exemple localhost/build/css/bootstrapt j'aurais essayé dans le navigateur localhost/build/css pour voir si j'ai bien accès au dossier. Sans avoir le projet sous les yeux c'est un peux compliqué

[MInfo25]

Quand j'esseaie d'ouvrir ce lien : http://localhost:8000/post/build/css/clean-blog.min.css j'obtient cette erreur :

No route found for "GET /post/build/css/clean-blog.min.css"

J'ai mis le projet sur github : https://github.com/Anouchka25/MyTopBlog
SVP aidez-moi ! Merci

[kevin254kl]

Bonjour,

Je viens d'intégrer et de comprendre votre problème au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

     <link href="{{ asset('css/clean-blog.min.css') }}" >

il faut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <link href="{{ asset('css/clean-blog.min.css') }}" type="text/css" rel="stylesheet">

car je pense que sinon au niveau des assets symfony ne comprend pas qu'il doit charger un fichier css.

Pour moi cela fonctionne.

[MInfo25]

waoooouh ça marche merci 1000 fois @kevin254kl tu me sauves la vie !