나는 세계적인있는 style.css이있어

Question

CSS 모듈과 반응 구성 요소에 @apply 사용 방법 :

하십시오 반응 구성 요소의있는 style.css에서이

:root { 
    --font: { 
     font-family: "Source Sans Pro", sans-serif; 
     -webkit-font-smoothing: antialiased; 
     -moz-osx-font-smoothing: grayscale; 
    } 
} 

... 그리고 구성 요소 자체에서

.rightnav { 
    @apply --font; 
    float: right; 
    color: white; 
} 

:

import React from "react" 
import cssModules from "react-css-modules" 
import style from "./style.css" 

render() { 
    return (
     <ul> 
      <li className={style.rightnav}>Blog</li> 
     </ul> 
) 
} 

는 오류가 발생합니다 : 없음 사용자 지정 속성 font 선언하지 설정합니다.

Answer 1

로컬 스타일 시트를 로컬 스타일 시트로 가져와야합니다. postcss-apply는 로컬 파일을 구문 분석하는 동안 해당 전역 파일에 대해 알 수있는 방법이 없기 때문입니다. 따라서 사용자 정의 속성 및 사용자 정의 속성 세트 선언만으로 부분적으로 처리하는 것이 좋습니다. 어떤 클래스 또는 요소의 스타일을 당신이,이 기술은 또한 이러한 클래스/요소 스타일을 복제 할에서 변수를 가져올 파일에 정의 된 경우

당신은 아마 postcss-import

@import 'path/to/variables.css'; 

.rightnav { 
    @apply --font; 
    float: right; 
    color: white; 
}