CSS and javascript not working in Symfony project

Question

I recently started a new project in Symfony and I did everything here but it didn't help.

I work for first time with Symfony and this is my first project. I strictly follow the documentation and I am trying to add some CSS but its now working. I use Encore and downloaded Yarn as the documentation says to do. Below I will upload some of my code. It seems fine but it's not.

`html.twig`

<!DOCTYPE html>
<html lang="en" xmlns:th="http:thymeleaf.org">

<head>
<title>Events & People</title>
<meta charset="UTF-8">


{% block stylesheets %}
{#{% stylesheets '@AppBundle/public/build/app.css' %}#}
    {{ encore_entry_link_tags('app') }}
    <link src="/build/app.css" rel="stylesheet"/>

{#{% endstylesheets %}#}
{% endblock %}
</head>

`webpack.config.js`

var Encore = require('@symfony/webpack-encore');

Encore
// 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 you JavaScript imports CSS.
 */
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')

// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()

/*
 * FEATURE CONFIG
 *
 * Enable & configure other features below. For a full
 * list of features, see:
 * https://symfony.com/doc/current/frontend.html#adding-more-features
 */
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())

//11111111111
// .enableSassLoader()
//
// // processes files ending in .less
// .enableLessLoader()
//
// // processes files ending in .styl
// .enableStylusLoader()
//11111111111

// enables Sass/SCSS support
//.enableSassLoader()

// uncomment if you use TypeScript
//.enableTypeScriptLoader()

// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

Here is an image of my tree of files:

If it's done right it should load the files from my /build/app.css, but it's not loading it.

Just to be sure, your public/build/app.css is not empty right ? I didn't know the EncoreBundle changed so I don't know exactly what does those encore_entry_* functions. I'll take a look tonight. Also, why do you have a style.scss file in /public ? And do you have any error in the network tab (browser dev console) ? — Etshy
– Etshy, Commented Jan 3, 2019 at 15:06
1 Yes, it's not empty 2 When I was reading the tutorial in here and I did it, it created a public folder and in the documentation was written to use it. 3 Yes I have an error but I don't know if it's from the CSS here — Todor Dimitrov
– Todor Dimitrov, Commented Jan 6, 2019 at 15:55
Hmmm where this message is displayed ? seems like there is more than a CSS/JS problem if the whole debug bar is bugged. Do you have more information about that error or you have this message only ? IN browser console (F12 > console tabs), do you have any error message ? — Etshy
– Etshy, Commented Jan 6, 2019 at 20:08

sh6210 · Accepted Answer · 2020-06-01 09:52:24Z

2

For me, it was just a caching problem. let's try to delete the cache.

answered Jun 1, 2020 at 9:52

sh6210

4,5881 gold badge42 silver badges30 bronze badges

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

Comments

BENARD Patrick · Accepted Answer · 2018-12-30 18:43:06Z

1

I didn't search deeply, but one bad think is your link tag...

Replace (src by href)

<link src="/build/app.css" rel="stylesheet"/>

By

<link href="/build/app.css" rel="stylesheet"/>

answered Dec 30, 2018 at 18:43

BENARD Patrick

31k16 gold badges104 silver badges109 bronze badges

Comments

Alvin Bunk · Accepted Answer · 2018-12-30 20:33:40Z

1

Have you tried this:

<link src="build/app.css" rel="stylesheet"/>

removing the leading "/" only and see if that works? not certain though.

answered Dec 30, 2018 at 20:33

Alvin Bunk

7,8023 gold badges31 silver badges48 bronze badges

Comments

Todor Dimitrov · Accepted Answer · 2019-01-06 19:03:13Z

1

I solved my problem I just have an error in my CSS and yarn didn't compile it

answered Jan 6, 2019 at 19:03

Todor Dimitrov

582 silver badges11 bronze badges

Comments

balzacLeGeek · Accepted Answer · 2019-01-02 02:25:17Z

0

Move your link tag outside of the stylesheet block's. And use twig asset() function instead of the absolute path. PS: use href instead of src in link tag

<!DOCTYPE html>
<html lang="en" xmlns:th="http:thymeleaf.org">

<head>
    <title>Events & People</title>
    <meta charset="UTF-8">

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

    {% block stylesheets %} {% endblock %}
</head>

If you really want the place the link tag inside your stylesheet block's, you must call this by using twig parent() function's in each template view

{% extends 'base.html.twig' %}
{% block stylesheets %}
    {# call the parent content inside stylesheet block #}
    {{ parent() }}

    {# other css code here #}
{% endblock %}

answered Jan 2, 2019 at 2:25

balzacLeGeek

8255 silver badges7 bronze badges

1 Comment

Todor Dimitrov Over a year ago

It didn't help either.

nasim shabo · Accepted Answer · 2020-08-26 07:36:55Z

0

the script & stylesheets should be outside the body tag like this!

> <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
       
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
     {% block stylesheets %}
        {{ encore_entry_link_tags('app') }}
     {% endblock %}
     {% block javascripts %}
        {{ encore_entry_script_tags('app') }}
     {% endblock %}
</html>

answered Aug 26, 2020 at 7:36

nasim shabo

1

Comments

hsn-mnj · Accepted Answer · 2020-08-26 08:40:08Z

0

The script and stylesheets should be outside the body tag, like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
       
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
     {% block stylesheets %}
        {{ encore_entry_link_tags('app') }}
     {% endblock %}
     {% block javascripts %}
        {{ encore_entry_script_tags('app') }}
     {% endblock %}
</html>

edited Aug 26, 2020 at 8:40

hsn-mnj

1,4681 gold badge11 silver badges25 bronze badges

answered Aug 26, 2020 at 7:30

nasim shabo

1

Collectives™ on Stack Overflow

CSS and javascript not working in Symfony project

`html.twig`

`webpack.config.js`

7 Answers 7

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

html.twig

webpack.config.js

7 Answers 7

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

`html.twig`

`webpack.config.js`