Integration von SASS-Stylesheets für Erweiterungsmodule

[mattsches]

Hallo zusammen,

ich habe ein etwas spezielles Anliegen. Ich baue ja gerade die Phasenumschaltung für meinen WARP1 (Details folgen noch, wie schon an anderer Stelle erwähnt). Dafür habe ich eine eigene Unterseite im Frontend angelegt und dort ein Diagramm mit drei Kurven eingefügt. Kurve 2 und 3 möchte ich natürlich auch stylen, so wie das aktuell noch ausschließlich für Kurve 1 geschieht.

In pio_hooks.py, Z. 309 ff. gibt es eine Schleife, die SCSS-Dateien der Module umkopiert. Allerdings bleibt das so lange wirkungslos, wie die Datei nicht in der main.scss importiert wird. Ich wollte meine Ergänzung gerne minimalinvasiv machen, also mit so wenigen Änderungen am Originalrepo wie möglich. Insofern fände ich es elegant, wenn pio_hooks.py die Datei nicht nur umkopiert, sondern auch gleich in die main.scss aufnimmt, falls dort nicht schon vorhanden.

Zum Beispiel so ab Z. 318:

                main_scss = os.path.join('web', 'src', 'scss', 'main.scss')
                with open(main_scss) as f:
                    file_content = f.read()
                    f.close()

                assert file_content, main_scss + ' could not be read'

                scss_module_import = '@import "modules/' + os.path.splitext(scss_name)[0]

                if not scss_module_import in file_content:
                    with open(main_scss, 'a') as f:
                        f.write('\n')
                        f.write(scss_module_import + '";')
                        f.close()

Was meint ihr?

Ich wollte einen Pull Request erstellen, doch irgendwiee bin ich zu doof dazu.

Viele Grüße,
Matthias

[photron]

Anstelle von scss/*.scss kannst du in jedem Frontend Module jetzt pre.scss und post.scss ablegen und diese werden dann automatisch in der main.scss am Anfang bzw. am Ende der Datei importiert. Das sollte in den meisten Fällen erstmal reichen.

https://github.com/Tinkerforge/esp32-firmware/commit/3b100bff1612bb81f148e8b0041e73bc5e0d1ab7

[mattsches]

Sehr cool, vielen Dank für die schnelle Implementierung!

Ihr seid einfach top, so macht das Spaß!

[mattsches]

Ein kleiner Fehler ist mir noch aufgefallen: Zeile 374 ff. von pio_hooks.py müsste heißen

    specialize_template(os.path.join("web", "main.scss.template"), os.path.join("web", "src", "main.scss"), {
        '{{{module_pre_imports}}}': '\n'.join(['@import "scss/modules/pre_{0}";'.format(x.under) for x in pre_scss_entries]),
        '{{{module_post_imports}}}': '\n'.join(['@import "scss/modules/post_{0}";'.format(x.under) for x in post_scss_entries])
    })

das "scss/" beim Import hat noch gefehlt.

[photron]

33 minutes ago, mattsches said:

"scss/" beim Import hat noch gefehlt.

Es ist sogar noch mehr kaputt. Bedingt durch andere Fehler ist dieser Fehler gestern nicht aufgefallen. Danke für's Aufpassen. Jetzt sollte es wirklich heile sein.

[mattsches]

Ja, jetzt funktioniert es. Danke!