diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index b7667b22..1948f54b 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -31,6 +31,15 @@ jobs:
TARGET_URL="https://storage.googleapis.com/guide-dev/${{ github.run_id }}"
hugo build --minify --baseURL "$TARGET_URL"
+ - name: Package source for download
+ run: |
+ mkdir -p ./public/zip ./_scss-source-stage/svgs
+ cp -r assets/css ./_scss-source-stage/css
+ cp static/svgs/downarrow.svg static/svgs/uparrow.svg ./_scss-source-stage/svgs/
+ (cd ./_scss-source-stage && zip -r ../public/zip/scss-source.zip . -x '*.DS_Store' -x '*/.*')
+ rm -rf ./_scss-source-stage
+ (cd static/js && zip -r ../../public/zip/js-components.zip components -x '*.DS_Store' -x '*/.*')
+
- name: Archive production artifacts
uses: actions/upload-artifact@v4
with:
diff --git a/.github/workflows/deploy-to-gh-pages.yml b/.github/workflows/deploy-to-gh-pages.yml
index 9cf348f1..c172b65e 100644
--- a/.github/workflows/deploy-to-gh-pages.yml
+++ b/.github/workflows/deploy-to-gh-pages.yml
@@ -41,6 +41,15 @@ jobs:
run: |
hugo --minify --config hugo.toml
+ - name: Package source for download
+ run: |
+ mkdir -p ./public/zip ./_scss-source-stage/svgs
+ cp -r assets/css ./_scss-source-stage/css
+ cp static/svgs/downarrow.svg static/svgs/uparrow.svg ./_scss-source-stage/svgs/
+ (cd ./_scss-source-stage && zip -r ../public/zip/scss-source.zip . -x '*.DS_Store' -x '*/.*')
+ rm -rf ./_scss-source-stage
+ (cd static/js && zip -r ../../public/zip/js-components.zip components -x '*.DS_Store' -x '*/.*')
+
- name: Archive production artifacts
uses: actions/upload-artifact@v4
with:
diff --git a/content/components/_index.md b/content/components/_index.md
index 26f89f41..07bd577a 100644
--- a/content/components/_index.md
+++ b/content/components/_index.md
@@ -9,7 +9,9 @@ weight: 20
### CSS 元件使用方式
-可直接[下載]({{< relURL "zip/css.zip" >}})，並使用下方程式碼匯入：
+#### 一般使用
+
+直接以 `` 引用或下載 [main.css]({{< relURL "main.css" >}}) 後置於專案靜態資源資料夾，並使用下方程式碼匯入：
{{< code-example content=`` >}}
@@ -21,32 +23,36 @@ weight: 20
-#### 多國語系支援
-
-請依照[多國語系支援]({{< ref "visual/internationalization/_index.md" >}})另外包含所需要的字體 CSS 檔案。
+#### 進階使用（SCSS）
-### JavaScript 元件使用方式
+若專案具備 SCSS build pipeline，可下載 [scss-source.zip]({{< relURL "zip/scss-source.zip" >}})，解壓後內含：
-#### [文字輸入區塊]({{< ref "components/textarea/_index.md" >}})
+- `css/` — SCSS 元件原始碼
+- `svgs/` — 元件樣式所引用的 SVG 圖示（如 `accordion`）
-下載 [character-count.js]({{< relURL "js/components/character-count.js" >}}) 檔案並選擇性使用下方程式碼匯入：
+部分元件 CSS 透過相對 URL（例如 `url("svgs/downarrow.svg")`）引用圖示，部署時請將 `svgs/` 置於與編譯後 CSS 相同層級，確保路徑可正確解析。
-{{< code-example content=`` >}}
+將進入點 `.scss` 置於 `css/` 目錄內（或以 `sass --load-path=css` 編譯），即可依需求 import 所需元件：
-#### [公文元件]({{< ref "components/official-document/_index.md" >}})
+{{< code-example content=`@import "variables";
+@import "color";
+@import "typography";
+@import "components/accordion";
+@import "components/modal";` >}}
-下載 [official-document-element.js]({{< relURL "js/components/official-document-element.js" >}}) 檔案並選擇性使用下方程式碼匯入：
+#### 多國語系支援
-{{< code-example content=`` >}}
+請依照[多國語系支援]({{< ref "visual/internationalization/_index.md" >}})另外包含所需要的字體 CSS 檔案。
-#### [互動資料表格]({{< ref "components/table/_index.md" >}})
+### JavaScript 元件使用方式
-下載 [interactive-table-element.js]({{< relURL "js/components/interactive-table-element.js" >}}) 檔案並選擇性使用下方程式碼匯入：
+各 JS 元件獨立分檔，每個元件的下載連結與詳細用法請參考個別元件頁面。如需一次取得全部，可下載 [js-components.zip]({{< relURL "zip/js-components.zip" >}})。
-{{< code-example content=`` >}}
+所有 JS 元件統一以 ES module 載入：
-#### [跳至主要內容區]({{< ref "components/skip-to/_index.md" >}})
+{{< code-example content=`` >}}
-下載 [skip-to-element.js]({{< relURL "js/components/skip-to-element.js" >}}) 檔案並選擇性使用下方程式碼匯入：
+例如：
-{{< code-example content=`` >}}
+{{< code-example content=`
+` >}}
diff --git a/readme.md b/readme.md
index a5c83253..2cbf3263 100644
--- a/readme.md
+++ b/readme.md
@@ -6,7 +6,9 @@
## CSS 元件使用方式
-可直接[下載](https://guide.nics.nat.gov.tw/assets/css.zip)，並使用下方程式碼匯入：
+### 一般使用
+
+直接以 `` 引用或下載 [main.css](https://guide.nics.nat.gov.tw/main.css) 後置於專案靜態資源資料夾，並使用下方程式碼匯入：
```
@@ -17,42 +19,44 @@
> [!WARNING]
> 本檔案暫時包含 Tachyons，作為 Atomic CSS 的第三方程式。
-### 多國語系支援
+### 進階使用（SCSS）
-請依照[多國語系支援](https://guide.nics.nat.gov.tw/visual/internationalization/index.html)另外包含所需要的字體 CSS 檔案。
+若專案具備 SCSS build pipeline，可下載 [scss-source.zip](https://guide.nics.nat.gov.tw/zip/scss-source.zip)，解壓後內含：
-## JavaScript 元件使用方式
+- `css/` — SCSS 元件原始碼
+- `svgs/` — 元件樣式所引用的 SVG 圖示（如 `accordion`）
-### [文字輸入區塊](https://guide.nics.nat.gov.tw/components/textarea/index.html)
+部分元件 CSS 透過相對 URL（例如 `url("svgs/downarrow.svg")`）引用圖示，部署時請將 `svgs/` 置於與編譯後 CSS 相同層級，確保路徑可正確解析。
-下載 [character-count.js](https://guide.nics.nat.gov.tw/js/components/character-count.js) 檔案並選擇性使用下方程式碼匯入：
+將進入點 `.scss` 置於 `css/` 目錄內（或以 `sass --load-path=css` 編譯），即可依需求 import 所需元件：
-```
-
```
-### [互動資料表格](https://guide.nics.nat.gov.tw/components/skip-to/index.html)
-
-下載 [skip-to-element.js](https://guide.nics.nat.gov.tw/js/components/skip-to-element.js) 檔案並選擇性使用下方程式碼匯入：
+例如：
```
-
+
```
## 開發
diff --git a/static/zip/css.zip b/static/zip/css.zip
deleted file mode 100644
index be624268..00000000
Binary files a/static/zip/css.zip and /dev/null differ