SCSS`function`,`mixin`을 CSS 모듈과 함께 사용하는 방법은 무엇입니까?

Question

방금 ​​React 프로젝트에서 CSS 모듈을 사용하기 시작했으며 멋지게 정리하고 싶습니다. SCSS utils, 함수 등을 그룹화합니다. 그러나 CSS 모듈로는 작동하지 않습니다. 내가 rem 함수를 가지고 있다고 가정하고, 내 프로젝트에서 그것을 어디에서나 사용할 수 있습니까? 나는 다음과 같은 함수를 만들려고했다.

:global {  
    @function rem($px) { 
    @return ($px/16px) * 1rem; 
    } 
} 

그리고 어디에서나 재사용 할 수는 있지만 작동하지 않는다. CSS 모듈을 사용하여 functions을 재사용 할 수 있습니까?

Answer 1

Sass는 CSS 모듈을 인식하지 못합니다.

우리가 일반적으로하는 일은 물리적 CSS를 출력하지 않는 common.scss입니다. 믹스 인, 함수, 변수 (Sass가 컴포넌트 레벨에서 컴파일 된 이후 예상대로 확장 및 자리 표시 자와 같은 것들은 엄격히 적용됩니다)에 대한 것입니다. 우리는 명시 적으로 그 파일을 필요로하는 모든 구성 요소로 가져옵니다. 왜냐하면 그 파일은 모두 마지막에 일반 CSS로 컴파일되었으므로 중복되지 않을 것입니다.

이것은 Vue에서 최소한 사용하는 방법입니다. 나는 React가 너무 다르다는 것을 상상할 수 없다.