CODEWITHSUNDEEP
phpsymfony
SouLBusterFr
SouLBusterFr

Reputation: 3

Symfony and basic css

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>

Upvotes: 0

Views: 224

Answers (1)

Manzolo
Manzolo

Reputation: 1969

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

Upvotes: 1

Related Questions