Only support app.scss name ? #41

sblondeau · 2023-12-07T15:05:58Z

Hello,

I try this new amazing bundle, but maybe I miss something.

When I create e.g a home.scss, and add <link rel="stylesheet" href="{{ asset('styles/home.scss') }}"> in my home.html.twig template
and then run
php bin/console sass:build --watch

I obtain this error message in CLI
Could not find Sass file: "/path/to/my/projetc/assets/styles/app.scss"

If I rename in app.scss it works. Is it impossible to use another file name ?
Thanks for your help

The text was updated successfully, but these errors were encountered:

thomasmerlin · 2023-12-08T11:00:42Z

Hello @sblondeau !

I'm also new to this component but i managed to make other entries aside of app.scss using SassBundle & AssetMapper components !

Here is what i have :

assets directory (very simple) :

assets
--- styles/
--- --- components/
--- --- --- _variable.scss
--- --- app.scss // Our first entry
--- --- global.scss // Second entry, for the sake of example
--- app.js

app.scss content :

h1 {
  text-decoration: underline;
}

global.scss content :

@import "components/_variables";

body {
  background-color: $bodyBackgroundColor;
}

My base.html.twig (see the two <link> tags) :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
        {% block stylesheets %}
            <link rel="stylesheet" href="{{ asset('styles/global.scss') }}">
            <link rel="stylesheet" href="{{ asset('styles/app.scss') }}">
        {% endblock %}

        {% block javascripts %}
            {{ importmap() }}
        {% endblock %}
    </head>
    <body>
        <h1>
            H1 being underlined
        </h1>
        {% block body %}{% endblock %}
    </body>
</html>

Create a configuration file config/packages/symfonycasts_sass.yaml with the following :

symfonycasts_sass:
  # Path to your Sass root file
  root_sass:
    - '%kernel.project_dir%/assets/styles/app.scss'
    - '%kernel.project_dir%/assets/styles/global.scss'

  # The Sass binary to use
  binary:               null

  # Whether to embed the sourcemap in the compiled CSS. By default, enabled only when debug mode is on.
  embed_sourcemap:      '%kernel.debug%'

You should be good after that. Now you can run :
php bin/console sass:build

And it should be good on your development environment !
Here is the frontend output i have with all my SCSS rules applied :

Additionnal notes :

In my example, i kept app.scss file but you can also remove it (don't forget to remove it from the config/packages/symfonycasts_sass.yaml file as well) and it should work as expected.
For a deployment in a production environment, you'll have something else, see the docs refering to that part
If you want to see which are the Sass paths recognized, you can dump just before the "Could not find Sass file : ..." error at vendor/symfonycasts/sass-bundle/src/SassBuilder.php#L74 :

public function getScssCssTargets(): array
    {
        $targets = [];
        dump($this->sassPaths); die; // <-- Debug here
        foreach ($this->sassPaths as $sassPath) {
            if (!is_file($sassPath)) {
                throw new \Exception(sprintf('Could not find Sass file: "%s"', $sassPath));
            }

            $targets[] = $sassPath.':'.$this->guessCssNameFromSassFile($sassPath, $this->cssPath);
        }

        return $targets;
    }

The expected output has to be all your paths listed in config/packages/symfonycasts_sass.yaml (Don't forget to clear the cache before, i had some issues not having all my paths because of that) :

apesl8@PORT253:~/Path/To/Your/Project$ php bin/console sass:build
^ array:2 [
  0 => "/home/user/Path/To/Your/Project/assets/styles/app.scss"
  1 => "/home/user/Path/To/Your/Project/assets/styles/global.scss"
]

Hope this helps ! 🙏

sblondeau · 2023-12-08T16:11:05Z

Many thanks Thomas for your detailed answer. 🙏
It's clear now, I didn't understand first the need to have a root sass file... :-) I think it could be added to documentation ;-) @weaverryan

weaverryan · 2023-12-10T11:34:03Z

@thomasmerlin That's a wonderful explanation. Would you mind adding a small section to the docs? It doesn't even need to be nearly this complete - the important parts are showing the root_sass configuration & showing how you have 2 link tags for the CSS files.

Also:

If you want to see which are the Sass paths recognized, you can dump just before the "Could not find Sass file : ..." error at vendor/symfonycasts/sass-bundle/src/SassBuilder.php#L74 :

This gave me the idea: when you run sass:build, we should output the Sass files that we are building. That should make life more clear. If you wanted to create a PR for that, it would be awesome.

thomasmerlin · 2023-12-10T16:27:58Z

Hello @weaverryan !

Glad my comment helped somehow 🙏
I can give it a look this week, is there a CONTRIBUTING.md somehow for development purpose ?

For the documentation point, main purpose is to add a "How to have multiple CSS entries at once" section ? Is there any best practice to "promote" for that ? Like, having a global css file and then having another page-specific css file ? (I don't know if that's the best way to use the component, just wondering)

This gave me the idea: when you run sass:build, we should output the Sass files that we are building. That should make life more clear. If you wanted to create a PR for that, it would be awesome.

I agree. This would be more clear for the user on what's compiled, i'll give it a try on it this week 👍

thomasmerlin · 2023-12-11T14:08:22Z

Hello @weaverryan !

Following what we said yesterday, i was giving a look at the listing of sass files to be compiled when executing sass:build, my first idea was to change the runBuild(bool $watch) from src/SassBuilder.php like this :

public function runBuild(bool $watch): Process
{
    $binary = $this->createBinary();

    $args = $this->getScssCssTargets();
    
    $output = $this->output;
    $output?->section('Sass files to be compiled');
    $output?->listing(
        array_map(
            function ($target) use ($output) {
                $targetExploded = explode(':', $target);
                return end($targetExploded);
            },
            $args
        )
    );

    if ($watch) {
        $args[] = '--watch';
    }

    if ($this->embedSourcemap) {
        $args[] = '--embed-source-map';
    }

    $process = $binary->createProcess($args);

    if ($watch) {
        $process->setTimeout(null);

        $inputStream = new InputStream();
        $process->setInput($inputStream);
    }

    $output?->note('Executing Sass (pass -v to see more details).');
    if ($output?->isVerbose()) {
        $output->writeln([
            '  Command:',
            '    '.$process->getCommandLine(),
        ]);
    }

    $process->start();

    return $process;
}

Here is an example output on the project i'm working on (both without and with -w option) :

What do you think of that ? 🙏

ddziech · 2023-12-20T11:23:34Z

There is no way to make something like this using AssetMapper and this bundle?
Example:
in list.js

import './styles/list.scss'

and then AssetMapper & SassBundle will know to compile list.scss?

tchafack · 2024-07-10T14:13:25Z

Don't forget to clear the cache before, i had some issues not having all my paths because of that

Is important when you change the root_sass conf

DoobleD mentioned this issue Feb 2, 2024

Add support for regex in root_sass #60

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Only support app.scss name ? #41

Only support app.scss name ? #41

sblondeau commented Dec 7, 2023

thomasmerlin commented Dec 8, 2023 •

edited

Loading

sblondeau commented Dec 8, 2023

weaverryan commented Dec 10, 2023

thomasmerlin commented Dec 10, 2023 •

edited

Loading

thomasmerlin commented Dec 11, 2023 •

edited

Loading

ddziech commented Dec 20, 2023

tchafack commented Jul 10, 2024

Only support app.scss name ? #41

Only support app.scss name ? #41

Comments

sblondeau commented Dec 7, 2023

thomasmerlin commented Dec 8, 2023 • edited Loading

sblondeau commented Dec 8, 2023

weaverryan commented Dec 10, 2023

thomasmerlin commented Dec 10, 2023 • edited Loading

thomasmerlin commented Dec 11, 2023 • edited Loading

ddziech commented Dec 20, 2023

tchafack commented Jul 10, 2024

thomasmerlin commented Dec 8, 2023 •

edited

Loading

thomasmerlin commented Dec 10, 2023 •

edited

Loading

thomasmerlin commented Dec 11, 2023 •

edited

Loading