import sass variables

[db1]

Sorry meinte natürlich import scss variables im Betreff

hello
ich würde gerne per java script einen eigenen style laden

if (aktuelle_farbe == "green") {

import variables from "my_styles/style_green.module.scss";
             
}

/* variables.module.scss */
$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

bekomme:

Uncaught SyntaxError: Cannot use import statement outside a module

was ist hier der Fehler ? bzw. wie könnte ich das machen

hoffe auf Hilfe !
danke
lg

 

[Oneixee5]

Ein import ... from ... darf in JavaScript nicht innerhalb eines if-Blocks oder einer Funktion stehen. Das muss immer oben in der Datei stehen, damit der Browser schon vor der Ausführung weiß, was geladen werden muss.
Das Laden als Promise, dyamischer Import wäre möglich, würde ich aber nicht machen, da das Nachladen verzögert sein kann und es viel besser geht.

// intern für SCSS
$color-green-primary: #64ff00;
$color-blue-primary: #007bff;

:root {
  --primary-color: #333; // default
}

[data-theme="green"] {
  --primary-color: #{$color-green-primary};
}

[data-theme="blue"] {
  --primary-color: #{$color-blue-primary};
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 1rem;
  border: none;
  &:hover {
    filter: brightness(1.2);
  }
}

// FALSCH (Import dürfen nicht in IF-Blöcke)
if (farbe == "green") { import vars from "./styles.module.scss"; }

// RICHTIG (Statisch, ganz oben in der Datei)
import vars from "./styles.module.scss";

// Dynamisch (wenn es erst später geladen werden soll)
if (aktuelle_farbe === "green") {
  const vars = await import("./my_styles/style_green.module.scss");
  console.log(vars.primaryColor);
}

const themeSwitcher = (themeColor) => {
  document.documentElement.setAttribute('data-theme', themeColor);
};

// Beispiel
let currentThemeColor = "green";
themeSwitcher(currentThemeColor);

Was auch noch gut wäre: Eine Rückmeldung zu erhalten, bspw. wenn dir eine Antwort geholfen hat.

 

[db1]

hello,

herzlichen dank für die ausführliche Antwort und Hilfe.
ich müsste es dynamisch machen:


if (aktuelle_farbe === "green") {

const vars = await import("./my_styles/style_green.module.scss");
console.log(vars.primaryColor);
}

hier bekomme ich: Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

grundsätzlich zur Erklärung.
mir geht es darum, dass ich eine geladene $brand-primary farbe die in einer .scss gespeichert ist
überschreibe wenn auf eine neue farbe geschaltet wird in dem fall zb. green
also wenn aktuelle_farbe === "green" dann soll $brand-primary: #42a82e werden.
scss sieht so aus :

$brand-primary: #000000 !default;
$gx-brand-secondary: #000000 !default;
$gx-body-bg-color: #ffffff !default;
$text-color: #333333 !default;

danke
lg

 

[Oneixee5]

Ich weiß nicht, ob ich dich richtig verstehe? Du willst eine SCSS-Datei mit Hilfe deiner Webseite und JavaScript überschreiben - also ändern?

Das geht nicht. SCSS-Dateien sind in deiner Webseite gar nicht vorhanden. Diese werden (vereinfacht) mit Hilfe eines Buildtools wie Vite oder Webpack zu CSS kompiliert. Deine Webseite verwendet am Ende also CSS.
Das gleiche wird mit TypeScript gemacht.

Der Browser sieht also immer nur HTML, CSS und JS, ganz egal welche Techniken und Tools du verwendest. Es gibt da noch einige weitere Möglichkeiten, dass soll hier aber mal nicht das Thema sein.

Was du tun kannst ist eine Datei bspw. im JSON-Format laden und daraus die Werte einlesen. Für solche Dinge wie "Theming-as-a-Service" ist ein Server erforderlich, welcher die Nutzereingaben entgegen nimmt, speichert und bei Bedarf wieder zurückliefert. Da CSS selbst keine Netzwerk-Anfragen (Requests) stellen kann, übernimmt JavaScript hier die Rolle des Vermittlers.

Ansonten mache das was im Beispiel steht:

const themeSwitcher = (themeColor) => {
  document.documentElement.setAttribute('data-theme', themeColor);
};

// Beispiel
let currentThemeColor = "green";
themeSwitcher(currentThemeColor);

//-> ...
themeSwitcher("blue");[/CODE]

// intern für SCSS
$color-green-primary: #64ff00;
$color-blue-primary: #007bff;

:root {
  --primary-color: #333; // default
}

[data-theme="green"] {
  --primary-color: #{$color-green-primary};
}

[data-theme="blue"] {
  --primary-color: #{$color-blue-primary};
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 1rem;
  border: none;
  &:hover {
    filter: brightness(1.2);
  }
}

 

[grrr]

hier bekomme ich: Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

Ja, das ist leider ein Nachteil in JS... wenn du in einer Funktion oder an einer Stelle await nutzen möchtest, um auf ein Promise zu warten, dann muss die komplette Aufruferkette bis hin zur Wurzel... auch als async deklariert sein.

Das eigentliche Problem ist hier aber glaube ich, dass das CSS mithilfe der SCSS-Variablen vorkompiliert werden muss und somit das Resultat statisch ist, also hinterher nicht mehr geändert werden kann.

 

[Oneixee5]

hier bekomme ich: Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

Wenn die kein async verwendest, dann kannst du das auch als Promise schreiben:

if (aktuelle_farbe === "green") {
  import("./my_styles/style_green.module.scss")
    .then((mod) => {
      const vars = mod.default ?? mod;
      // vars hier verwenden
      console.log(vars.primaryColor);
    })
    .catch((err) => {
      console.error("SCSS-Import fehlgeschlagen:", err);
    });
}

oder kompakt:

if (aktuelle_farbe === "green") {
  import("./my_styles/style_green.module.scss")
    .then((mod) => meineFunction(mod.default ?? mod))
    .catch((err) => console.error("SCSS-Import fehlgeschlagen:", err));
}

 

[db1]

Wenn die kein async verwendest, dann kannst du das auch als Promise schreiben:

if (aktuelle_farbe === "green") {
  import("./my_styles/style_green.module.scss")
    .then((mod) => {
      const vars = mod.default ?? mod;
      // vars hier verwenden
      console.log(vars.primaryColor);
    })
    .catch((err) => {
      console.error("SCSS-Import fehlgeschlagen:", err);
    });
}

oder kompakt:

if (aktuelle_farbe === "green") {
  import("./my_styles/style_green.module.scss")
    .then((mod) => meineFunction(mod.default ?? mod))
    .catch((err) => console.error("SCSS-Import fehlgeschlagen:", err));
}

herzlichen dank,

sieht jetzt bei mir so aus

 import("../../../../my_styles/style_green.module.scss")
    .then((mod) => {
    const vars = mod.default || mod;
      // vars hier verwenden
      console.log(vars.primaryColor);
    })
              
    .catch((err) => {
      console.error("SCSS-Import fehlgeschlagen:", err);
    });

scss sieht so aus:

$primary-color: #00ff00;

:export {
  primaryColor: $primary-color;
}

folgend Fehler in console:

Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

SCSS-Import fehlgeschlagen: TypeError: Failed to fetch dynamically imported module:
......../my_styles/style_green.module.scss
lg

(anonymous)

@

init-de.min.js?bust=…18ea496b143ad57:469

 

[Oneixee5]

Darauf würdest du oben schon hingewiesen, das funktioniert so nicht.