** 해결 못함 고민중 ** [반응형 프로젝트] SCSS의 미디어쿼리에 따라 SVG 색상 변경하는 방법? + SCSS 미디어쿼리 전역 설정 (vite.config.ts)

 

 

@ 데스크탑 사이즈일 때 

 

 

@ 모바일, 테블릿 사이즈 일 때 

 

 

 

그림을 보면 알 수 있듯이 데스크탑 사이즈일 때 검색 용 아이콘 (SVG) 의 색상도 변경해주어야 함을 깨달았다... 

나는 SVG를 리액트 컴포넌트화해서 props 로 색상이랑 사이즈를 내려주고 있는데 이 부분을 어떻게 사이즈에 따라 변경할 수 있을까??? 

 

 

 

 

---

Chapter 02.   

SCSS의 반응형 웹 제작을 위해 미디어쿼리 사이즈 설정 전역 설정하는 방법 + width vite.config.ts

 

반응형 웹을 만들기 위해서 우선 " variable.scss " 파일을 생성해서 그곳에 가각의 화면 사이즈 컨트롤 할 수 있는 변수 설정? 선작업을 해둔다.

 

/*반응형 믿디어쿼리*/
$mobile: 767px;
$tablet: 1023px;
$desktop: 1024px;

@mixin mobile {
	@media (max-width: $mobile) {
		@content;
	}
}

@mixin tablet {
	@media (min-width: $mobile) and (max-width: $tablet) {
		@content;
	}
}

@mixin desktop {
	@media (min-width: $desktop) {
		@content;
	}
}

 

 

 

그러고 " vite.config.ts " 파일에서 scss 설정을 추가해줍니다. 저는 path 를 << @ >> 이 친구를 사용해서 root 위치에 접근할 수 있도록 설정했습니다. 사실 resolve alias 설정을 하지 않아도 tsconfigPaths() 플러그인 설치로 path 설정을 쉽게 할 수 있습니다. 

 

하지만 SCSS 의 전역 설정을 하기 위해 @import  "@/variable.scss"; 문을 전역에 설정하기 위해서는 굳이 굳이 resolve alias path 설정을 해주어야 합니다. 인식하지 못한다는 것 같더라구용.

 

 

# 마주칠 수 있는 ERR : 'path' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.ts (2307)

   -  하라는대로 types/node 설치해주면 됩니다.   

참고 블로그 링크 

 

import sass from "sass";
import path from "path";

export default defineConfig({
	plugins: [react(), tsconfigPaths()],
	resolve: {
		alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }]
	},
	css: {
		preprocessorOptions: {
			scss: {
				implementation: sass,
				additionalData: `@import "@/variable.scss";\n`
			}
		}
	}
});

 

 

 

**참고 : [Git] Error: Can't find stylesheet to import. 
**참고 블로그 : Vite 환경에서 path alias 설정하기
**참고 블로그 : SCSS 추가 및 전역 스타일 설정
**참고 블로그 :