CSS 변수 및 문자열 연결

CSS 변수를 사용하여 동적 경로를 생성하려고합니다.CSS 변수 및 문자열 연결

예 :

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

모든 포인터 :이 -없는 모듈로 'var(--hpe-fonts-path' 실패

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

, 이것은 웹팩 기록인가?

출처

2016-07-12 Alan Souza

-1

나는 당신의 접근 방식과 몇 가지 문제를 참조하십시오

@font-face 규칙이 :root에 설정 CSS 변수를 상속하지 않습니다.
+을 사용하여 CSS 문자열을 연결할 수 없습니다. string concatenation in css
모든 구현이 url() 내부에 아직 var()을 지원하지는 않습니다.

출처

2016-07-12 18:46:01 Oriol

유사한 문제는이 글에서 설명된다 : 사용자가 @ 글꼴 얼굴 규칙 내부 변수를 사용하려고

CSS native variables not working in media queries

허용 된 대답 (https://stackoverflow.com/a/40723269/4879632)에 설명 된 것처럼 변수는 root (html) 하위 요소에 상속되므로 변수 내부에서 변수를 사용할 수 없습니다. @ 규칙 (글꼴, 미디어 쿼리 등)은 요소가 아니므로 루트에서 상속하지 않습니다. 따라서 거기에서 변수를 참조 할 수 없습니다.

출처

2017-12-13 14:04:33 Kantharis

CSS 변수 및 문자열 연결

답변

관련 문제