phpsymfonysymfony-assetmapper

Symfony SassBundle not recognize the .yaml config

I am working on a Symfony App with AssetMapper & ux-twig-component. To optimize resources at the loading, I made different stylesheets. My main stylesheet is a .ccs template file that I reuse in most of my projects.

My other files are .scss files I include via AssetMapper when I need them. They basically set the style of specific .twig components.

Screenshot of the folder "assets" in my working tree:

{% extends 'base.html.twig' %}

{% block title %}Hello PublicController!{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/insets.scss') }}">
{% endblock %}

My issue is that I can't build my .scss stylesheets because SassBundle only wants a single file "app.scss".

PS C:\Users\julie\web\web-app-mairie> php bin/console sass:build --watch
[critical] Error thrown while running command "sass:build --watch". Message: "Could not find Sass file: "C:\Users\julie\web\web-app-mairie/assets/styles/app.scss""

In SassBuilder.php line 116:
                                                                                        
  Could not find Sass file: "C:\Users\julie\web\web-app-mairie/assets/styles/app.scss"  
                                                                                        

sass:build [-w|--watch]

So I tried to build with my external binary. PS C:\Users\julie\web\web-app-mairie> sass /assets/insets.scss /assets/insets.css Error : Error reading ..\..\..\..\assets\insets.scss: Cannot open file.

And I finally tried to add the path of my .scss files to the root config like mentioned in Symfony doc. BUT I have the same error that at the start: the builder could not find the app.scss. This didn't surprise me enough because I had to create the symfonycasts_sass.yaml file in config/packages myself. There is what I wrote:

# config/packages/symfonycasts_sass.yaml
symfonycasts_sass:
    root_sass:
        - '%kernel.project_dir%/assets/insets.scss'

I suppose it uses an another config file.... but where? I searched a bit in vendor directory but I quickly lost my way.

So guys, do you know anything about this ***? Or do you have another solution / advice for me?

Solution

  • Okay, finally after extensive research I decided to dive in my vendor directory. All I found on the web was about Webpack Encore, and I use Asset Mapper, and didn't want to install webpack in addition (idk if it would have caused any conflict lol).

    Hum, So ... I finally found my ennemy file : SymfonycastsSassExtension.php

    Project
↳ vendor
   ↳ symfonycasts
      ↳ sass-bundle
         ↳ src
             ↳ DependencyInjection
                ↳ SymfonycastsSassExtension.php

    This .php file is in charge to load the .yaml config file as a TreeBuilder class and extract parameters values as ArrayNodeDefinition and then, apply default values to this ArrayNodeDefinition if not defined.

    # it's only part of the file

#[...]

    public function getConfigTreeBuilder(): TreeBuilder
    {
        $treeBuilder = new TreeBuilder('symfonycasts_sass');

        $rootNode = $treeBuilder->getRootNode();
        \assert($rootNode instanceof ArrayNodeDefinition);

        $rootNode
            ->children()
                ->arrayNode('root_sass')
                    ->info('Path to your Sass root file')
                    ->beforeNormalization()->castToArray()->end()
                    ->cannotBeEmpty()
                    ->scalarPrototype()
                        ->end()
                    ->validate()
                        ->ifTrue(static function (array $paths): bool {
                            if (1 === \count($paths)) {
                                return false;
                            }

                            $filenames = [];
                            foreach ($paths as $path) {
                                $filename = basename($path, '.scss');
                                $filenames[$filename] = $filename;
                            }

                            return \count($filenames) !== \count($paths);
                        })
                        ->thenInvalid('The "root_sass" paths need to end with unique filenames.')
                        ->end()
                    ->defaultValue(['%kernel.project_dir%/assets/styles/app.scss'])
                ->end()

#[...]

    I replaced the default value in ->defaultValue(['']) by a stupid name which I will spare you. I tried to lauch a build to test if it spit an error with the stupid name in question ... the build worked! This time sass compiled the file I have filled in the .yaml config previously.

    > php bin/console sass:build --watch

 ! [NOTE] Downloading Sass binary from https://github.com/sass/dart-sass/releases/download/1.69.7/dart-sass-1.69.7-windows-x64.zip

 4002605/4002605 [============================] 100%
 ! [NOTE] Executing Sass (pass -v to see more details).

[2024-04-11 14:30:51] Compiled assets\styles\insets.scss to var\sass\insets.output.css.
Sass is watching for changes. Press Ctrl-C to stop.

    Honestly, I am a bit confused, I still don't know why it didn't consider my configuration file earlier. The extract of code proves the function is looking for, and I correctly named my file.