Chapters

21 Chapters | 2:10:39 |

01

Hello Webpack Encore

6:40
02

Webpacking our First Assets

5:27
03

Twig Helpers, entrypoints.json & yarn Scripts

4:04
04

Modules: require() & import()

4:57
05

Importing External Libraries & Global Variables

6:38
06

Bootstrap & the Curious Case of jQuery Plugins

6:05
07

The Magic of Split Chunks

6:06
08

Importing 3rd Party CSS + Image Paths

8:54
09

Sass & Overriding Bootstrap Variables

8:10
10

Copying Files

8:11
11

Page-Specific JS: Multiple Entries

7:36
12

Entry Refactoring

7:04
13

Refactoring Autocomplete JS & CSS

5:21
14

Auto-Provide jQuery for Mischievous Packages

6:37
15

addStyleEntry(): CSS-Only Entrypoint

3:51
16

Support any Browser with PostCSS & Babel

6:00
17

browserslist: What Browsers do you need to Support?

6:04
18

Polyfills & Babel

4:35
19

The Single Runtime Chunk

6:31
20

Async Imports

5:42
21

Production Build & Deployment

6:03

> JavaScript Frameworks & Tools > Webpack Encore: Frontend like a Pro!

15.

addStyleEntry(): CSS-Only Entrypoint

|

Autoplay

Previous Chapter

Next Chapter

Login or Register to check out the script

4 Comments

Sort By

Login or Register to join the conversation

CDesign 6 years ago edited

Is it possible to set a link's 'media' attribute with the encore_entry_link_tags function?

I need to be able to create this link:

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

with media set to 'print'.

|

Victor SFCASTS CDesign 6 years ago

Hey John,

Good question! Unfortunately, it's not possible to do it out-of-the-box with the encore_entry_link_tags() Twig function. There's an open issue about this, you can follow it to track the progress: https://github.com/symfony/...

P.S. The only way to do what you want for now is to get files as array using encore_entry_css_files() Twig function and and process it manually in a loop.

Cheers!

|

Dirk 6 years ago

I wonder, would it somehow be possible to add the entrytags for the css and/or js to twig components (bits of the page). For example, If I try to add a link inside of the block "stylesheet" and call the parent I get the error: "Calling "parent" on a template that does not extend nor "use" another template is forbidden.". This makes sense, but also I cannot extent another template, because my component is part of many different templates. If I simply add the 'encore_entry_link_tags' inside of the component, the css will be loaded, but not where I would want this (not inside <head>). I can fix this by adding the 'encore_entry_link_tags' if every single template that uses my component, but I am hoping there is a better solution.

|

sadikoff Dirk 6 years ago edited

Hey Dirk
Probably for this you should have some very base layout, which you will extend from every template, than you will be able to use {{ parent() }}

Cheers!

|

This tutorial works great with Symfony5!

Symfony 4 Webpack Encore

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.1.3",
        "ext-iconv": "*",
        "aws/aws-sdk-php": "^3.87", // 3.91.4
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "doctrine/annotations": "^1.0", // 1.10.1
        "doctrine/doctrine-bundle": "^1.6.10", // 1.10.2
        "doctrine/doctrine-migrations-bundle": "^1.3|^2.0", // v2.0.0
        "doctrine/orm": "^2.5.11", // v2.7.2
        "knplabs/knp-markdown-bundle": "^1.7", // 1.7.1
        "knplabs/knp-paginator-bundle": "^2.7", // v2.8.0
        "knplabs/knp-time-bundle": "^1.8", // 1.9.0
        "league/flysystem-aws-s3-v3": "^1.0", // 1.0.22
        "league/flysystem-cached-adapter": "^1.0", // 1.0.9
        "liip/imagine-bundle": "^2.1", // 2.1.0
        "nexylan/slack-bundle": "^2.0,<2.2.0", // v2.1.0
        "oneup/flysystem-bundle": "^3.0", // 3.0.3
        "php-http/guzzle6-adapter": "^1.1", // v1.1.1
        "phpdocumentor/reflection-docblock": "^3.0|^4.0", // 4.3.0
        "sensio/framework-extra-bundle": "^5.1", // v5.3.1
        "stof/doctrine-extensions-bundle": "^1.3", // v1.3.0
        "symfony/asset": "^4.0", // v4.2.5
        "symfony/console": "^4.0", // v4.2.5
        "symfony/flex": "^1.9", // v1.21.6
        "symfony/form": "^4.0", // v4.2.5
        "symfony/framework-bundle": "^4.0", // v4.2.5
        "symfony/property-access": "4.2.*", // v4.2.5
        "symfony/property-info": "4.2.*", // v4.2.5
        "symfony/security-bundle": "^4.0", // v4.2.5
        "symfony/serializer": "4.2.*", // v4.2.5
        "symfony/twig-bundle": "^4.0", // v4.2.5
        "symfony/validator": "^4.0", // v4.2.5
        "symfony/web-server-bundle": "^4.0", // v4.2.5
        "symfony/webpack-encore-bundle": "^1.4", // v1.5.0
        "symfony/yaml": "^4.0", // v4.2.5
        "twig/extensions": "^1.5" // v1.5.4
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.0", // 3.1.0
        "easycorp/easy-log-handler": "^1.0.2", // v1.0.7
        "fzaninotto/faker": "^1.7", // v1.8.0
        "symfony/debug-bundle": "^3.3|^4.0", // v4.2.5
        "symfony/dotenv": "^4.0", // v4.2.5
        "symfony/maker-bundle": "^1.0", // v1.11.5
        "symfony/monolog-bundle": "^3.0", // v3.3.1
        "symfony/phpunit-bridge": "^3.3|^4.0", // v4.2.5
        "symfony/stopwatch": "4.2.*", // v4.2.5
        "symfony/var-dumper": "^3.3|^4.0", // v4.2.5
        "symfony/web-profiler-bundle": "4.2.*" // v4.2.5
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.27.0", // 0.27.0
        "autocomplete.js": "^0.36.0",
        "autoprefixer": "^9.5.1", // 9.5.1
        "bootstrap": "^4.3.1", // 4.3.1
        "core-js": "^3.0.0", // 3.0.1
        "dropzone": "^5.5.1", // 5.5.1
        "font-awesome": "^4.7.0", // 4.7.0
        "jquery": "^3.4.0", // 3.4.0
        "popper.js": "^1.15.0",
        "postcss-loader": "^3.0.0", // 3.0.0
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^7.0.1", // 7.3.1
        "sortablejs": "^1.8.4", // 1.8.4
        "webpack-notifier": "^1.6.0" // 1.7.0
    }
}

Previous Chapter

Next Chapter