From 7136e23aeffa14b37443ce262f3c3cadc5d0a5e3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 27 Jan 2026 15:47:37 +0000
Subject: [PATCH] =?UTF-8?q?refactor:=20Sass/SCSS=E3=82=92=E5=89=8A?=
 =?UTF-8?q?=E9=99=A4=E3=81=97=E3=83=97=E3=83=AC=E3=83=BC=E3=83=B3CSS?=
 =?UTF-8?q?=E3=81=B8=E7=A7=BB=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sassパッケージを削除
- skeleton-sass-officialをskeleton-css（プレーンCSS版）に置き換え
- 全コンポーネントのSCSSネストをフラットなCSSに変換
- lang="scss"を削除
- util.scssをutil.cssにリネーム
- nuxt.config.tsからscssプリプロセッサ設定を削除

https://claude.ai/code/session_01LVVJWig1hpoPHcoVkQCZWe
---
 assets/css/{util.scss => util.css} |   0
 components/Contact.vue             |  61 +++++++++--------
 components/Home.vue                | 106 +++++++++++++++--------------
 components/Works.vue               |  67 ++++++++++--------
 nuxt.config.ts                     |  16 ++---
 package-lock.json                  |  38 ++++-------
 package.json                       |   3 +-
 pages/index.vue                    |  10 +--
 8 files changed, 147 insertions(+), 154 deletions(-)
 rename assets/css/{util.scss => util.css} (100%)

diff --git a/assets/css/util.scss b/assets/css/util.css
similarity index 100%
rename from assets/css/util.scss
rename to assets/css/util.css
diff --git a/components/Contact.vue b/components/Contact.vue
index 75f142c..a4e2fe9 100644
--- a/components/Contact.vue
+++ b/components/Contact.vue
@@ -33,8 +33,8 @@
   </section>
 </template>
 
-<style lang="scss">
-@import "~/assets/css/util";
+<style>
+@import "~/assets/css/util.css";
 
 @media screen and (min-width: 480px) {
   section {
@@ -46,38 +46,43 @@
 
 .second-section {
   background: #bbffff;
+}
 
-  .contact-list,
-  .person-list {
-    list-style: none;
+.second-section .contact-list,
+.second-section .person-list {
+  list-style: none;
+}
 
-    li:before {
-      font-family: "Font Awesome 6 Free";
-      font-weight: 900;
-      margin-right: 0.5em;
-    }
+.second-section .contact-list li:before,
+.second-section .person-list li:before {
+  font-family: "Font Awesome 6 Free";
+  font-weight: 900;
+  margin-right: 0.5em;
+}
 
-    .twitter:before {
-      font-family: "Font Awesome 6 Brands";
-      content: "\f099";
-    }
+.second-section .contact-list .twitter:before,
+.second-section .person-list .twitter:before {
+  font-family: "Font Awesome 6 Brands";
+  content: "\f099";
+}
 
-    .email:before {
-      content: "\f0e0";
-    }
+.second-section .contact-list .email:before,
+.second-section .person-list .email:before {
+  content: "\f0e0";
+}
 
-    .person:before {
-      content: "\f007";
-    }
+.second-section .contact-list .person:before,
+.second-section .person-list .person:before {
+  content: "\f007";
+}
 
-    li a {
-      text-decoration: none;
-    }
-  }
+.second-section .contact-list li a,
+.second-section .person-list li a {
+  text-decoration: none;
+}
 
-  .wf-roundedmplus1c,
-  .wf-roundedmplus1c * {
-    font-family: "Rounded Mplus 1c";
-  }
+.second-section .wf-roundedmplus1c,
+.second-section .wf-roundedmplus1c * {
+  font-family: "Rounded Mplus 1c";
 }
 </style>
diff --git a/components/Home.vue b/components/Home.vue
index 619811d..dbfae6a 100644
--- a/components/Home.vue
+++ b/components/Home.vue
@@ -64,8 +64,8 @@
   </section>
 </template>
 
-<style lang="scss">
-@import "~/assets/css/util";
+<style>
+@import "~/assets/css/util.css";
 
 @media screen and (min-width: 480px) {
   section {
@@ -82,59 +82,63 @@
 
 .first-section {
   background: #ffffbb;
-  .hero-image {
-    border-radius: 100%;
-    display: block;
-    margin-top: 3em;
-    margin-left: auto;
-    margin-right: auto;
-    width: 60%;
-    height: 60%;
-  }
+}
 
-  .button {
-    span {
-      color: white;
-    }
-    border: none;
-  }
+.first-section .hero-image {
+  border-radius: 100%;
+  display: block;
+  margin-top: 3em;
+  margin-left: auto;
+  margin-right: auto;
+  width: 60%;
+  height: 60%;
+}
 
-  .text-center {
-    text-align: center;
-  }
+.first-section .button {
+  border: none;
+}
 
-  #nav {
-    margin: 13px 0 0 0;
-    ul li {
-      display: inline;
-      margin: 0 20px 0 0;
-    }
-    a {
-      text-decoration: none;
-    }
-    a:hover {
-      text-decoration: underline;
-    }
-  }
+.first-section .button span {
+  color: white;
+}
 
-  .row {
-    .mini-image {
-      width: 20%;
-      height: 20%;
-      vertical-align: middle;
-      display: inline-block;
-      margin-left: 0.2em;
-    }
-    .text-container {
-      width: 70%;
-      font-size: 0.65em;
-      display: inline-block;
-      vertical-align: middle;
-    }
-  }
+.first-section .text-center {
+  text-align: center;
+}
 
-  .pretty-row {
-    margin-bottom: 1em;
-  }
+.first-section #nav {
+  margin: 13px 0 0 0;
+}
+
+.first-section #nav ul li {
+  display: inline;
+  margin: 0 20px 0 0;
+}
+
+.first-section #nav a {
+  text-decoration: none;
+}
+
+.first-section #nav a:hover {
+  text-decoration: underline;
+}
+
+.first-section .row .mini-image {
+  width: 20%;
+  height: 20%;
+  vertical-align: middle;
+  display: inline-block;
+  margin-left: 0.2em;
+}
+
+.first-section .row .text-container {
+  width: 70%;
+  font-size: 0.65em;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.first-section .pretty-row {
+  margin-bottom: 1em;
 }
 </style>
diff --git a/components/Works.vue b/components/Works.vue
index 2ac296a..55e2ccc 100644
--- a/components/Works.vue
+++ b/components/Works.vue
@@ -48,8 +48,8 @@ const reversedEvents = computed(() => {
 })
 </script>
 
-<style lang="scss">
-@import "~/assets/css/util";
+<style>
+@import "~/assets/css/util.css";
 
 @media screen and (min-width: 480px) {
   section {
@@ -66,12 +66,14 @@ const reversedEvents = computed(() => {
 .events {
   overflow-y: hidden;
   max-height: 55vh;
-  .event-title {
-    font-size: 2em;
-  }
-  &.is-open {
-    max-height: none;
-  }
+}
+
+.events .event-title {
+  font-size: 2em;
+}
+
+.events.is-open {
+  max-height: none;
 }
 
 .works {
@@ -98,39 +100,44 @@ const reversedEvents = computed(() => {
   overflow: hidden;
   width: 100%;
   height: auto;
-  .work-thumbnail-img {
-    max-width: 100%;
-  }
+}
+
+.work-thumbnail .work-thumbnail-img {
+  max-width: 100%;
 }
 
 .work-text-content {
   padding: 16px;
   background-color: #eee;
-  .work-name {
-    margin: 0 0 12px 0;
-    font-size: 20px;
-    color: #4cc48e;
-    font-weight: bold;
-    a {
-      color: inherit;
-    }
-  }
-  .work-description {
-    margin: 0 0 12px 0;
-    font-size: 14px;
-    color: #555;
-    font-weight: lighter;
-  }
+}
+
+.work-text-content .work-name {
+  margin: 0 0 12px 0;
+  font-size: 20px;
+  color: #4cc48e;
+  font-weight: bold;
+}
+
+.work-text-content .work-name a {
+  color: inherit;
+}
+
+.work-text-content .work-description {
+  margin: 0 0 12px 0;
+  font-size: 14px;
+  color: #555;
+  font-weight: lighter;
 }
 
 .work-meta {
   overflow: hidden;
   width: 100%;
   font-size: 12px;
-  .work-authors {
-    float: left;
-    color: #aaa;
-  }
+}
+
+.work-meta .work-authors {
+  float: left;
+  color: #aaa;
 }
 
 .readmore {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7086824..0fc8e40 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -19,16 +19,8 @@ export default defineNuxtConfig({
   modules: ['@nuxt/eslint'],
 
   css: [
-    '@fortawesome/fontawesome-free/css/all.css'
-  ],
-
-  vite: {
-    css: {
-      preprocessorOptions: {
-        scss: {
-          api: 'modern-compiler'
-        }
-      }
-    }
-  }
+    '@fortawesome/fontawesome-free/css/all.css',
+    'skeleton-css/css/normalize.css',
+    'skeleton-css/css/skeleton.css'
+  ]
 })
diff --git a/package-lock.json b/package-lock.json
index c30cc43..a5f9bf4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,8 +14,7 @@
         "@fortawesome/fontawesome-free": "^6.7.2",
         "@nuxt/eslint": "^1.4.2",
         "eslint": "^9.39.2",
-        "sass": "^1.97.3",
-        "skeleton-sass-official": "^4.0.0"
+        "skeleton-css": "^2.0.4"
       }
     },
     "node_modules/@antfu/install-pkg": {
@@ -7981,8 +7980,9 @@
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
       "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
-      "devOptional": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/import-fresh": {
       "version": "3.3.1",
@@ -9169,14 +9169,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize-scss": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/normalize-scss/-/normalize-scss-7.0.1.tgz",
-      "integrity": "sha512-qj16bWnYs+9/ac29IgGjySg4R5qQTp1lXfm7ApFOZNVBYFY8RZ3f8+XQNDDLHeDtI3Ba7Jj4+LuPgz9v/fne2A==",
-      "dev": true,
-      "license": "(MIT OR GPL-2.0)",
-      "peer": true
-    },
     "node_modules/npm-run-path": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
@@ -10760,8 +10752,9 @@
       "version": "1.97.3",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz",
       "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
-      "devOptional": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -10781,8 +10774,9 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
       "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "devOptional": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "readdirp": "^4.0.1"
       },
@@ -10797,8 +10791,9 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
       "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "devOptional": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 14.18.0"
       },
@@ -11007,15 +11002,12 @@
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
       "license": "MIT"
     },
-    "node_modules/skeleton-sass-official": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/skeleton-sass-official/-/skeleton-sass-official-4.0.0.tgz",
-      "integrity": "sha512-rJrnKeft3lFstg2l9IA+uttJZX/ccIsxAuJgClq4X05/yAJ5sr+STgZgRjL9byhODqJvlkOP68uhb/LDFn3PCw==",
+    "node_modules/skeleton-css": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/skeleton-css/-/skeleton-css-2.0.4.tgz",
+      "integrity": "sha512-e+WEQGBFHk7N5gu9IHUj4ySGc/k84LqZO52ldLHQxOPhVT6rE++OGADO4I+yyKxMVlmt9UVicYBzc6EfiYB8xA==",
       "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "normalize-scss": "^7.0.1"
-      }
+      "license": "MIT"
     },
     "node_modules/slash": {
       "version": "5.1.0",
diff --git a/package.json b/package.json
index 7a1f012..19f854e 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@nuxt/eslint": "^1.4.2",
     "eslint": "^9.39.2",
-    "sass": "^1.97.3",
-    "skeleton-sass-official": "^4.0.0"
+    "skeleton-css": "^2.0.4"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
index e5b2882..411ae36 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -13,19 +13,13 @@ import historyData from '~/public/history.json'
 const history = ref<History>(historyData as History)
 </script>
 
-<style lang="scss">
-@import "skeleton-sass-official/src/core/config";
-@import "skeleton-sass-official/src/themes/fresh/vars";
-@import "skeleton-sass-official/src/themes/fresh/include_components";
-@import "skeleton-sass-official/src/themes/fresh/grid";
-
+<style>
 @import url("//fonts.googleapis.com/css?family=Raleway:400,300,600");
 @import url("//fonts.googleapis.com/earlyaccess/roundedmplus1c.css");
 
 html,
 body {
   height: 100%;
-  margin: 0;
-  font-family: "Raleway";
+  font-family: "Raleway", sans-serif;
 }
 </style>