CSS変数と文字列連結

Question

CSS変数を使用して動的パスを生成しようとしています。

例：

:root { 
    --fonts-path: "/path/to/font"; 
} 

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

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

これは、見つからないモジュール'var(--hpe-fonts-path'で失敗している、これは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 

任意のポインタ？

Answer 1

私はあなたのアプローチにはいくつかの問題を参照してください。

• @font-faceルールは:rootに設定されたCSS変数を継承しません。

• +を使用してCSS文字列を連結することはできません。 string concatenation in css

• すべての実装で、がまだurl()に対応しているわけではありません。

Answer 2

同様の問題は、この記事に記載されている：ユーザーがする@ font-faceルール内部変数を使用しようと

CSS native variables not working in media queries

。

受け入れられた回答（https://stackoverflow.com/a/40723269/4879632）に記載されているように、変数はroot（html）子要素によって継承されるため、ルール内で変数を使用することはできません。 @ Rules（フォントフェース、メディアクエリなど）は要素ではないので、ルートから継承しません。したがって、そこから変数を参照することはできません。