feat: module scss 적용 설정

sikkzz · sikkzz · commit 77a52cba6c55 · 2025-01-28T00:36:16.000+09:00
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/cache/classnames-npm-2.5.1-c7273f3423-afff4f77e6.zip b/.yarn/cache/classnames-npm-2.5.1-c7273f3423-afff4f77e6.zip
diff --git a/.yarn/cache/neo-async-npm-2.6.2-75d6902586-c2f5a604a5.zip b/.yarn/cache/neo-async-npm-2.6.2-75d6902586-c2f5a604a5.zip
diff --git a/.yarn/cache/sass-loader-npm-16.0.4-58fd3a0682-d57c5fa356.zip b/.yarn/cache/sass-loader-npm-16.0.4-58fd3a0682-d57c5fa356.zip
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.64.2",
+    "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -53,6 +54,7 @@
     "lint-staged": "^15.4.1",
     "prettier": "^3.4.2",
     "sass": "^1.83.4",
+    "sass-loader": "^16.0.4",
     "storybook": "^8.5.0",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,7 @@
+import Button from "@/components/Button";
+
 const App = () => {
-  return <div>App</div>;
+  return <Button />;
 };
 
 export default App;
diff --git a/src/components/Button.module.scss b/src/components/Button.module.scss
@@ -0,0 +1,10 @@
+@use "@/styles/_mixins" as *;
+@use "@/styles/_variables" as *;
+
+.ButtonTest {
+  @include titleLg;
+  padding: 12px 16px;
+  border-radius: 8px;
+  background-color: $color-bg-error;
+  color: #fff;
+}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -0,0 +1,9 @@
+import classNames from "classnames";
+
+import styles from "@/components/Button.module.scss";
+
+const Button = () => {
+  return <button className={classNames(styles.ButtonTest)}>Button</button>;
+};
+
+export default Button;
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
@@ -1,3 +1,5 @@
+@use "@/styles/_variables.scss" as *;
+
 @mixin titleLg {
   font-size: $font-size-xl;
   font-weight: $font-weight-bold;
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
@@ -128,3 +128,7 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+
+* {
+  font-family: "Pretendard", sans-serif;
+}
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -25,7 +25,7 @@
       "@/*": ["./src/*"]
     },
     "plugins": [{ "name": "typescript-plugin-css-modules" }],
-    "types": ["@testing-library/jest-dom"]
+    "types": ["@testing-library/jest-dom", "vite/client"]
   },
-  "include": ["src"]
+  "include": ["src", "src/types"]
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,3 +1,5 @@
+import path from "path";
+
 import react from "@vitejs/plugin-react";
 
 import { defineConfig } from "vite";
@@ -6,4 +8,19 @@ import tsconfigPaths from "vite-tsconfig-paths";
 export default defineConfig({
   plugins: [react(), tsconfigPaths()],
   base: "/",
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+          @use "@/styles/_variables.scss" as *;
+          @use "@/styles/_mixins.scss" as *;
+        `,
+      },
+    },
+  },
 });
diff --git a/yarn.lock b/yarn.lock
@@ -3473,6 +3473,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"classnames@npm:^2.5.1":
+  version: 2.5.1
+  resolution: "classnames@npm:2.5.1"
+  checksum: 10c0/afff4f77e62cea2d79c39962980bf316bacb0d7c49e13a21adaadb9221e1c6b9d3cdb829d8bb1b23c406f4e740507f37e1dcf506f7e3b7113d17c5bab787aa69
+  languageName: node
+  linkType: hard
+
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -7539,6 +7546,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^8.20.0"
     "@typescript-eslint/parser": "npm:^8.20.0"
     "@vitejs/plugin-react": "npm:^4.3.4"
+    classnames: "npm:^2.5.1"
     cypress: "npm:^14.0.0"
     eslint: "npm:^8.57.0"
     eslint-config-prettier: "npm:^10.0.1"
@@ -7554,6 +7562,7 @@ __metadata:
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
     sass: "npm:^1.83.4"
+    sass-loader: "npm:^16.0.4"
     storybook: "npm:^8.5.0"
     ts-jest: "npm:^29.2.5"
     ts-node: "npm:^10.9.2"
@@ -7615,6 +7624,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"neo-async@npm:^2.6.2":
+  version: 2.6.2
+  resolution: "neo-async@npm:2.6.2"
+  checksum: 10c0/c2f5a604a54a8ec5438a342e1f356dff4bc33ccccdb6dc668d94fe8e5eccfc9d2c2eea6064b0967a767ba63b33763f51ccf2cd2441b461a7322656c1f06b3f5d
+  languageName: node
+  linkType: hard
+
 "node-addon-api@npm:^7.0.0":
   version: 7.1.1
   resolution: "node-addon-api@npm:7.1.1"
@@ -8778,6 +8794,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass-loader@npm:^16.0.4":
+  version: 16.0.4
+  resolution: "sass-loader@npm:16.0.4"
+  dependencies:
+    neo-async: "npm:^2.6.2"
+  peerDependencies:
+    "@rspack/core": 0.x || 1.x
+    node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+    sass: ^1.3.0
+    sass-embedded: "*"
+    webpack: ^5.0.0
+  peerDependenciesMeta:
+    "@rspack/core":
+      optional: true
+    node-sass:
+      optional: true
+    sass:
+      optional: true
+    sass-embedded:
+      optional: true
+    webpack:
+      optional: true
+  checksum: 10c0/d57c5fa35620e9022cfa3e5d49f3f9b3e54fb8b2fa9d021c10fe26c8c2f77103e038b6540eb20123a6f73aef23d2beb04033d3b7772588ca3f3c0ba2a4ee40ac
+  languageName: node
+  linkType: hard
+
 "sass@npm:^1.70.0, sass@npm:^1.83.4":
   version: 1.83.4
   resolution: "sass@npm:1.83.4"

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "@/styles/_variables.scss" as *;`
	`2`	`+`
`1`	`3`	`@mixin titleLg {`
`2`	`4`	`font-size: $font-size-xl;`
`3`	`5`	`font-weight: $font-weight-bold;`
Original file line number	Diff line number	Diff line change
`@@ -128,3 +128,7 @@ table {`
`128`	`128`	`border-collapse: collapse;`
`129`	`129`	`border-spacing: 0;`
`130`	`130`	`}`
	`131`	`+`
	`132`	`+* {`
	`133`	`+ font-family: "Pretendard", sans-serif;`
	`134`	`+}`