Chapters

23 Chapters | 2:07:02 |

01

¿Un mundo sin sistemas de construcción?

4:04
02

Hacer JS moderno directamente en tu navegador

7:41
03

Instalación de AssetMapper

3:03
04

Mapear Activos

6:01
05

CSS e imágenes de fondo

3:26
06

cSS de terceros

6:09
07

Añadir fuentes

3:02
08

CSS de Tailwind

5:47
09

JavaScript y mapa de importación

7:38
10

importmap:require - Libs JS de terceros

5:07
11

Importar archivos específicos de un paquete

4:54
12

Añadir Stimulus

8:04
13

Paquetes Symfony UX Stimulus

4:00
14

Controladores de Stimulus perezosos

2:28
15

Depurando

5:12
16

CSS y JS específicos de la página

5:05
17

Excluir archivos

3:53
18

Despliegue en Platform.sh

6:29
19

Configurar el despliegue de platform.sh

9:08
20

Desplegar los activos

5:04
21

Almacenamiento en caché a largo plazo, compresión y combinación de archivos

5:27
22

Optimización y perfiles

6:06
23

Carga previa

9:14

> Symfony > AssetMapper: JS Moderno sin Sistema de Compilación

Buy Access to Course

06.

cSS de terceros

|

|

Autoplay

Previous Challenge

Next Chapter

Login or register to check out the script

4 Comments

Sort By

Login or Register to join the conversation

lexhartman 2 years ago edited

I have (or is it "am in") a dillema. I see you updated the script with a link to the sassbundle (https://symfony.com/bundles/SassBundle/current/index.html). BUT on that page there is a tip that says: "While this bundle is great, you may not need to use Sass!". Development goes fast so i understand the 'overthinkings'. What would you recommend now to do? I would like to use Bootstrap with Assetmapper in my Symfony 7 project, what would be the best practice?

1 |

Victor SFCASTS lexhartman 2 years ago edited

Hey @lexhartman

Good discovery on that note! It mostly depends on how you use Sass in your project, I mean, what exactly features from Sass you're using in your project. I would recommend you to read this blog post: https://gomakethings.com/is-it-time-to-drop-sass/ - to see what you can do with the latest CSS and what you can't do (i.e. what features are only available in Sass). So, in short, if you don't need those extra features that are available only in Sass, or you can just get rid of them in favor of a simpler CSS way - then you don't need Sass in your project at all, and so you don't need that bundle too - just write plain CSS files. But if you need them - we covered you with this Sass bundle, use it :)

I hope this helps!

Cheers!

|

John-S 1 year ago

In installed bootstrap via composer:
php bin/console importmap:require bootstrap

app.css(background-color {skyblue}) not working

//app.js
import './styles/app.css';
import 'bootstrap/dist/css/bootstrap.min.css';

app.css working:

import 'bootstrap/dist/css/bootstrap.min.css';
import './styles/app.css';

If I add one more css file:

// purple.css
body {
    background-color: purple;
}

app.css purple.css overwrites default app.css(skyblue):

// bootstrap css
import 'bootstrap/dist/css/bootstrap.min.css';
// main css
import './styles/app.css';
// purple css
import './styles/purple.css';

It seems that later files overwrites the former ones. Am It is what it is or the way i'm including css is not recommended ?

|

Victor SFCASTS John-S 1 year ago

Hey John,

Good research! The order of included files is indeed important, and as you can see the latter included file will override previous properties if there will be a conflict, i.e. if you declare the same in both files with different values, so you just need to keep it in mind. And yeah, usually you may want to include all the third-party CSS files like Bootstrap one, and only then your own custom styles that will help you to override some defaults from those files, that's the correct strategy :)

I hope this helps!

Cheers!

|

Symfony 6.3

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "^4.0", // v4.2.0
        "doctrine/doctrine-bundle": "^2.7", // 2.10.0
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.2.4
        "doctrine/orm": "^2.12", // 2.15.2
        "knplabs/knp-time-bundle": "^1.18", // v1.20.0
        "pagerfanta/doctrine-orm-adapter": "^4.0", // v4.1.0
        "pagerfanta/twig": "^4.0", // v4.1.0
        "stof/doctrine-extensions-bundle": "^1.7", // v1.7.1
        "symfony/asset": "6.3.*", // v6.3.0
        "symfony/asset-mapper": "6.3.*", // v6.3.0
        "symfony/console": "6.3.*", // v6.3.0
        "symfony/dotenv": "6.3.*", // v6.3.0
        "symfony/flex": "^2", // v2.3.1
        "symfony/framework-bundle": "6.3.*", // v6.3.0
        "symfony/http-client": "6.3.*", // v6.3.0
        "symfony/monolog-bundle": "^3.0", // v3.8.0
        "symfony/proxy-manager-bridge": "6.3.*", // v6.3.0
        "symfony/runtime": "6.3.*", // v6.3.0
        "symfony/stimulus-bundle": "^2.9", // v2.9.1
        "symfony/twig-bundle": "6.3.*", // v6.3.0
        "symfony/ux-turbo": "^2.9", // v2.9.1
        "symfony/web-link": "6.3.*", // v6.3.0
        "symfony/yaml": "6.3.*", // v6.3.0
        "twig/extra-bundle": "^2.12|^3.0", // v3.6.1
        "twig/twig": "^2.12|^3.0" // v3.6.1
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.4
        "symfony/debug-bundle": "6.3.*", // v6.3.0
        "symfony/maker-bundle": "^1.41", // v1.49.0
        "symfony/stopwatch": "6.3.*", // v6.3.0
        "symfony/web-profiler-bundle": "6.3.*", // v6.3.0
        "zenstruck/foundry": "^1.21" // v1.33.0
    }
}

Previous Challenge

Next Chapter