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!

Buy Access to Course

08.

Importing 3rd Party CSS + Image Paths

|

Autoplay

Previous Chapter

Next Chapter

Login or register to check out the script

14 Comments

Sort By

Login or Register to join the conversation

Ad F. 5 years ago edited

now you need a loader for css

`ERROR in ./assets/styles/app.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

.bd-callout{padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem;border:1px solid #eee;border-left-width:.25rem;border-radius:.25rem}`

1 |

weaverryan SFCASTS Ad F. 5 years ago

Hey @cybernet2u!

What's your code look like that gives you this error? Encore automatically adds the CSS loader, so you should never see an error like this.

Cheers!

|

Kensley L. 6 years ago

Any suggestions on how to install and run the latest version of font-awesome 5 with this tutorial? A source referred that we should be using @fortawesome/fontawesome-free as a package download now, not font-awesome. Any suggestions?

1 |

weaverryan SFCASTS Kensley L. 6 years ago edited

Hey Kensley L.!

I just did that yesterday on something :). Quick answer:


yarn add @fortawesome/fontawesome-free --dev

Then, from inside some CSS file somewhere, add:


@import '~@fortawesome/fontawesome-free/css/all.css';

There are variations - like you could only import some of the CSS, or you could import the Sass in that same package, but that's the idea. Let me know if it helps :).

Cheers!

1 |

MK 4 years ago

After moving the image files from public/images into the assets folder they are not shown anymore.
Doesn't Webpack need to take care of copying these image files into the public/images folder after this step?

|

Victor SFCASTS MK 4 years ago

Hey Martin,

No, unfortunately Webpack Encore does not know what exactly files you want to copy to the public/ dir, so you have to specify it in webpack.config.js - Webpack Encore has .copyFiles() method that helps with it. It will be next in this course btw, see https://symfonycasts.com/sc... :)

Cheers!

|

MAli 4 years ago

Hi, After adding @import '~bootstrap'; in app.css
I get the following error in console:
GET http://localhost/build/~bootstrap net::ERR_ABORTED 404 (Not Found)
and bootstrap css not working :(

When i stop yarn watch and rerun it agan the app.css file goes back to the prevues version and delete the new line `@import '~bootstrap'; ` !!!???

Bootstrap.js on app.js works with out any program.

|

MAli MAli 4 years ago

And yarn watch not working for app.css file !!
When I try to rerun the yarn watch command the app.css file removes every change and gets back to the first version when I installed encore using `composer require encore`

I don't understand why , any help please :)

|

MAli MAli 4 years ago

Everything works fine now when I enabled `.enableSassLoader()` in webpack.config.js and changed from .css to .scss :)

|

weaverryan SFCASTS MAli 4 years ago

Hey @Ali!

Nice job debugging! It's unfortunate that you got such an odd error originally... I actually would have expected it to work fine... but who knows. You've got it working now is all that matters :).

Cheers!

|

MAli weaverryan 4 years ago edited

Hey @weaverryan
Thank you for your reply :)

Cheers!

|

be_tnt 7 years ago edited

Hello!

I am trying to change the font path used for boostrap variable $font-family-sans-serif. I have upoaded my fonts in /assets/fonts and create a new copyFiles in my webpack to copy the fonts in public folder:

`
.copyFiles({

from: './assets/fonts',
to: 'fonts/[path][name].[hash:8].[ext]'

})`

In my variables.scss, I defined the font path as follow:
$font-path: '/public/build/fonts';

The new value for bootstrap font-family:
$font-family-sans-serif: 'Numito-Regular'

Example of a font face :
<br />@font-face {<br /> font-family: 'Nunito-Bold';<br /> src: url('#{$font-path}/Nunito-Bold.eot');<br /> src: url('#{$font-path}/Nunito-Bold.eot?#iefix') format('embedded-opentype'),<br /> url('#{$font-path}/Nunito-Bold.woff2') format('woff2'),<br /> url('#{$font-path}/Nunito-Bold.woff') format('woff'),<br /> url('#{$font-path}/Nunito-Bold.ttf') format('truetype'),<br /> url('#{$font-path}/Nunito-Bold.svg#Nunito-Bold') format('svg');<br /> font-weight: bold;<br /> font-style: normal;<br />}<br />

Compilation is working well but in my page, I got a 404 for the font. Checking the network tab, I can see it's looking for the font file without the hash.

How can I make it looking for the right font file? Or maybe I should do it differently?

Thx!

|

sadikoff be_tnt 7 years ago edited

Hey be_tnt

IIRC you shouldn't create separate .copyFiles() for fonts, you should just configure $font-path relative to your variables.scss for example $font-path: '../fonts'; and webpack will do all the magic.

Cheers!

|

be_tnt sadikoff 7 years ago

Indeed!! Thx for this explanation :)

|

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