Puis-je exporter des variables Sass et les importer dans des variables Angular Typescript ?

Question

Je l'ai regardé pendant un certain temps. J'ai mon application en ce moment telle qu'elle est. Nous avons des variables définies dans le scss pour la coloration. J'essaie d'importer ces variables dans Typescript pour pouvoir les soumettre aux serveurs.

J'ai un tas de chaînes de polices et de couleurs dans mon composant Angular, mais je me suis dit qu'il fallait les pousser dans un fichier scss car il est utilisé pour la conception. Le problème est que je ne sais pas comment récupérer les couleurs.

J'ai vu certaines personnes faire quelque chose de similaire en Javascript, mais je n'ai pas réussi à le reproduire en Typescript.

Idéalement, je veux faire faire :

Scss :

:export { myVariable:#ffffff; }

NGTypescript :

import {styles} from "./styles.scss";

et ensuite faire quelque chose qui ressemble à :

onPostRequest(){ let color = styles.myVariable; ... }

Lorsque j'arrive à la ligne d'importation ci-dessus, il est indiqué : Impossible de trouver le module './icon-picker.component.scss'.ts(2307)

J'ai vu dans des exemples similaires comme React, qui fait la même chose, mais j'ai aussi des problèmes pour porter ce concept à Angular. https://github.com/css-modules/css-modules/issues/86 montre des concepts que j'ai remarqués. Voici également une présentation en Javascript qui semble également présenter des problèmes : https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

Answer 1

Avez-vous essayé de définir les couleurs en tant que variables dans src/styles.scss, en les liant à des sélecteurs CSS et en référençant ces sélecteurs dans le fichier html du composant ?

Par exemple :

$primary-color: #333;
$secondary-color: #777;
.primary-color {
   color: $primary-color;
}
.secondary-color {
   color: $secondary-color;
}

Et ensuite dans votre composant html :

<p class="primary-color">Text with primary color</p>
<p class="secondary-color">Text with secondary color</p>

Pour votre intérêt, vous pouvez également changer le composant css en scss en renommant le *.css et en mettant à jour la référence StyleUrls dans le fichier ts du composant.