Installation bootstrap 4 sur Symfony 4

**ziggs** · 07/01/2019, 23h31

Bonjour à tous,

Débutant sur Symfony 4 je rencontre un soucis en suivant la documentation officiel de Symfony.

J'aimerai pouvoir utiliser bootstrap, j'ai donc procédé comme ceci :

-

installation de node.js (node --version v10.15.0)
- installation du package yarn (yarn --version 1.12.3)
- installation Encore (composer require encore )

Cela ma créer les fichiers assets, webpack.config.js, node_modules

j'ai mon fichier package.json :

{
"devDependencies": {
"@symfony/webpack-encore": "^0.22.0",
"bootstrap": "^4.2.1",
"jquery": "^3.3.1",
"popper.js": "^1.14.6",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
}

Mon fichier app.css

@import "../../node_modules/bootstrap/dist/css/bootstrap.css";

Mon fichier app.js

/*
* Welcome to your app's main JavaScript file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/

// any CSS you require will output into a single css file (app.css in this case)
require('../css/app.css');

// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
// const $ = require('jquery');

console.log('assets/js/app.js');

Mon ficher base.html.twig :
...

{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
{% endblock %}

</head>
<body>
...

<button type="button" class="btn btn-primary">Primary</button>

...

{% block javascripts %}

<script src="{{ asset('build/js/app.js') }}" ></script>
{% endblock %}
</body>
</html>

Cela ne m'active en rien mon css..

J'ai un bouton sans css, qu'est ce que j'ai bien pu oublié ?

**Seb33300** · 09/01/2019, 05h14

Les fichiers sont bien présent dans /public/build après les avoir compilé avec `yarn run encore dev` ?

**ziggs** · 09/01/2019, 17h11

J'ai bien le fichier :

assets

> css > app.css
> js > app.js

public

>build
> app.css
> app.js
> entrypoints.json
> manifest.json
> runtime.js
index.php

**armel18** · 09/01/2019, 18h36

si ton fichier css se trouve dans le dossier public/build/css , pour appeler ce fichier depuis la vue:

Code :

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

1
2
3
4
5
 
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
    {# le rendu de la page html générée : <link rel="stylesheet" href="/build/css/app.css"> #}
{% endblock %}

autre façon d'appeler le fichier css:

Code :

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

1
2
3
4
 
{% block stylesheets %}
    {{ encore_entry_link_tags('css/app') }}
{% endblock %}

Dans tous les cas de figure il faut vérifier dans la page html générée que t'as bien le fichier css.

par ailleurs tu nous montres pas le fichier webpack.config.js où tu as déclarés les points d'entrées et les point de sorties de tes assets.

**ziggs** · 11/01/2019, 21h18

Merci ça marche maintenant

Installation bootstrap 4 sur Symfony 4 [4.x]

Symfony PHP

Discussions similaires

Partager

Partager