Only support app.scss name ?

sblondeau commented 11 months ago

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

thomasmerlin commented 11 months ago

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 ! :pray:

sblondeau commented 11 months ago

Many thanks Thomas for your detailed answer. :pray: 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 commented 11 months ago

@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 commented 11 months ago

Hello @weaverryan !

Glad my comment helped somehow :pray: 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 :+1:

thomasmerlin commented 11 months ago

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 ? :pray:

ddziech commented 11 months ago

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 commented 4 months ago

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 _rootsass conf

SymfonyCasts / sass-bundle

Only support app.scss name ? #41