2016-07-12 102 views
1

我試圖使用CSS變量來生成動態路徑。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 

任何指針?

回答

-1

我看到一些問題,你的方法:

  • @font-face規則不繼承上:root設置CSS變量。

  • 您不能使用+連接CSS字符串。請參閱string concatenation in css

  • 不是所有的實現都支持var(),但在url()之內。