[Feat] #1 - scss 적용 및 변수 모음집 생성 - scss 인텔리센스 익스텐션 vscode 추천

src/app/globals.css → src/app/globals.scss

@@ -38,6 +38,9 @@
   --callout-border-rgb: 172, 175, 176;
   --card-rgb: 180, 185, 188;
   --card-border-rgb: 131, 134, 135;
+
+
+
 }
 
 @media (prefers-color-scheme: dark) {

src/app/home/page.module.scss

@@ -0,0 +1,5 @@
+@use '../../lib/styles/palette' as *;
+
+// *{
+//     color: $main-blue-color;
+// }

src/app/home/page.tsx

@@ -1,4 +1,4 @@
-import styles from "./page.module.css";
+import styles from "./page.module.scss";
 
 export default function HomePage() {
   return (

src/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "./globals.css";
+import "./globals.scss";
 
 const inter = Inter({ subsets: ["latin"] });
 

src/app/login/page.tsx

@@ -1,4 +1,4 @@
-import styles from "./page.module.css";
+import styles from "./page.module.scss";
 
 export default function LoginPage() {
   return (

src/app/mypage/page.module.scss

@@ -0,0 +1,4 @@
+@use '../../lib/styles/palette' as *;
+.main{
+    color: $main-blue-color;
+}

src/app/mypage/page.tsx

@@ -1,8 +1,8 @@
-import styles from "./page.module.css";
+import styles from "./page.module.scss";
 
 export default function MyPage() {
   return (
-    <div>
+    <div className={styles.main}>
         MyPage
     </div>
   );

src/app/page.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import styles from "./page.module.css";
+import styles from "./page.module.scss";
 
 export default function Home() {
   return (

src/app/shop/page.tsx

@@ -1,4 +1,4 @@
-import styles from "./page.module.css";
+import styles from "./page.module.scss";
 
 export default function ShopPage() {
     return (

src/lib/styles/_palette.scss

@@ -0,0 +1,2 @@
+// 색상 팔레트  
+$main-blue-color: rgb(110, 110, 229);