반응 CSS 모듈에서 글로벌 설정 파일을 만드는 방법

Question

색상 및 CSS 스타일에 사용할 기타 설정을 저장하는 파일이 필요합니다. 여러 파일에서 같은 색을 여러 번 지정하고 싶지 않기 때문에. 어떻게하면 CSS 모듈을 사용하여이를 달성 할 수 있습니까? 예를 들어

: setting.css (CSS 모듈과 함께 사용할 수 있습니다) 말대꾸처럼 보이는 귀하의 샘플에서

$primary-color: #785372; 
$secondary-corlor: #22b390; 

버튼/styles.css가

.button { 
    background: $primary-color; 
    display: flex; 
} 

Answer 1

. 그렇다면 변수를 포함하는 부분을 가져옵니다. 있다면

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

는 더 말대꾸는 postcss-modules-values 당신이 찾고있는 무엇 포함되지 :

variables.css

@value primary: #785372; 
@value secondary: #22b390; 

styles.css

@value primary, secondary from './path/to/variables.css'; 

.button { 
    background: primary; 
    display: flex; 
} 

편집 :
가 사실 더있다 PostCSS 플러그인을 통한 옵션. postcss-simple-vars 또는 postcss-custom-properties으로, 나중에 CSS 사양에 가깝게 남아있는 명백한 이점이 있습니다. 그들은 모두 같은 요구 사항을 공유하지만, 다른 방법으로 구성 파일을 가져옵니다.