Symfony and basic css

Question

I just started to use symfony to make a website. I'm really new to this but still with internet and all the documentation i manage to understand how it basically work and i figured out how to use the assets for my css code on symfony. I've got my asset configured with the entry and everything else seems to work. Even my public dir seems to be ok. Now when i tried to write some css it doesn't seems to load on my home page :/. Can someone help me with this ? Thanks for your help ! :)

HERE'S MY WEBPACK.CONFIG.JS

    // directory where compiled assets will be stored
    .setOutputPath('public/build')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    //.addEntry('app', './assets/js/app.js')
    //.addEntry('page1', './assets/js/page1.js')
    //.addEntry('page2', './assets/js/page2.js')
    .addEntry('style', './assets/css/app.css')

HERE'S MY BASE.TWIG.HTML FILE


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        {% block stylesheets %}<link rel="stylesheet" href="{{ asset('/build/css/style.css') }}">{% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

HERE'S THE HEAD OF THE PAGE WHERE I WANT TO APPLY THE CSS ON

{% extends 'base.html.twig' %}
{% block body%}
<h1>welcome</h1>
<img src="" alt="Home pic" class="bckPic">

    <!-- About -->

<h2 class="headTitle">About</h2>

    <div class="row">
        <p class="col">blablablablablabla</p>
        <img class="col" src="" alt="logo">
    </div>

Try to execute yarn encore dev (for develop env) or yarn encore prod (for prod env) on root folder of project — Manzolo
– Manzolo, Commented Aug 24, 2019 at 20:34

Manzolo · Accepted Answer · 2019-08-24 21:04:01Z

1

Your code seem to be correct.

Try to change

`<link rel="stylesheet" href="{{ asset('/build/css/style.css') }}">`

with

{{ encore_entry_link_tags('style') }}

"style" is entry name in your webpack.config.js -> .addEntry('style', './assets/css/app.css')

Then in command line go to source root folder and run:

 yarn install
 #for develop env
 yarn encore dev
 #for prod env
 #yarn encore prod

and refresh page

See: https://symfony.com/doc/current/frontend/encore/installation.html

edited Aug 24, 2019 at 21:04

answered Aug 24, 2019 at 20:44

Manzolo

1,97912 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SouLBusterFr Over a year ago

Looks like it worked ! thanks you a lot it's always satisfying when you get nice help like this when you start to discover something in dev !

Collectives™ on Stack Overflow

Symfony and basic css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related