12

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;
}

これは not-found module'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

ポインタはありますか？

4

4 に答える 4

6

あなたのアプローチにはいくつかの問題があります。

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

  • +CSS 文字列の連結には使用できません。css での文字列連結を参照してください

  • var()すべての実装が内部をサポートしているわけではありurl()ません。

于 2016-07-12T18:46:01.283 に答える
1

CSS で変数を連結することはできません (こちらを参照):

CSS では (コンテンツ プロパティを除いて) 連結できないため、CSS 変数を連結することはできません。これは、たとえば、数値である CSS 変数を単位と組み合わせることはできないことを意味します。

// No version of this will work 
div {
  --height: 100;
  height: var(--height) + 'px';
}
于 2022-01-04T07:16:47.020 に答える