Variables de CSS et concaténation de chaînes

Question

Je cherche à utiliser des variables CSS pour générer un chemin dynamique.

Exemple:

:root {
  --fonts-path: "/chemin/vers/police";
}

@font-face {
  font-family: "NomPolice";
  src: url(var(--fonts-path) + "/NomPolice-Light.woff") format('woff');
  font-weight: 100;
}

html {
  font-family: 'Metric', Arial, sans-serif;
}

Cela échoue avec un module non trouvé 'var(--hpe-fonts-path', voici le log de webpack :

ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/theme/fonts.css
Module not found: Error: Cannot resolve module 'var(--fonts-path' in /Users/project-sample/src/theme
 @ ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/theme/fonts.css 6:83-114 6:234-265 6:403-434 6:576-607

Des idées ?

Answer 1

Je vois quelques problèmes avec votre approche :

• Les règles @font-face ne héritent pas des variables CSS définies sur :root.

• Vous ne pouvez pas utiliser + pour concaténer des chaînes CSS. Voir concaténation de chaînes en css

• Toutes les implémentations ne prennent pas encore en charge var() à l'intérieur de url().

Answer 2

Un problème similaire est décrit dans ce post:

Les variables natives CSS ne fonctionnent pas dans les requêtes média

où l'utilisateur essaie d'utiliser une variable à l'intérieur d'une règle @font-face.

Comme décrit dans la réponse acceptée (https://stackoverflow.com/a/40723269/4879632), vous ne pouvez pas utiliser de variables à l'intérieur des règles, car les variables sont héritées par les éléments enfants de :root (html). Les règles @ (faces de police, requêtes média, etc.) ne sont pas des éléments, donc elles n'héritent pas de la racine. Ainsi, vous ne pouvez pas faire référence à une variable à partir de là.