iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 29
3
Modern Web

在 React 生態圈內打滾的一年 feat. TypeScript系列 第 29

Day28 | 最強聯名款 TSX 上市-SCSS 篇

前言

本篇進入到導入 SCSS,但因為 TypeScript 的特性,導致 SCSS 還要再經過一層封裝,才有辦法被讀到 .tsx 中,詳細做法會在文中說明!


前置準備

  1. 文中的專案會以 Day27 的專案架構繼續講解,如果未跟到前一天的進度,可以從 GitHub 上 Clone 下來。
  2. 一顆擁有學習熱忱的心。

設置 Style

其實到最後所有的範例都沒有在設置 Style,但既然要處理 SCSS,我們先試著撰寫一些樣式。

打開 src/index.scss,刪掉目前所有的內容後再加上新樣式:

.mainBlock {
    background: #afa;
}

接著到 src/index.tsx 添加 mainBlock 的樣式:

增加後便可輸入指令 npm run start 運行網頁:

雖然正常運行,但是程式裡 import Style 的部分居然出現 TypeScript 的警告:

下方就開始解決吧!


SCSS

這個部分主要是得將 SCSS 內的樣式名稱產生一個接口,這樣 TypeScript 在取得樣式名稱的時候才不會有問題,因為他會把整個 Style 當作一個 model,其實在上個篇章,我們對 React 等套件下載 @types 版本,就是因為那些版本也有提供對 TypeScript 的接口。

首先我們下載 typed-scss-modules ,它就可以替我們自動產生 SCSS 的接口:

npm install typed-scss-modules --save-dev

下載完後打開 package.json,並在 script 中加入一行新的指令:

"scripts": {
  /* 其餘省略 */
  "tsm": "tsm src"
},

tsm 後方的 src 是路徑,剛剛的套件會去找該路徑下所有的 .scss 檔案,並將它編譯能讓 .tsimport 的 model,現在使用 npm run 做執行:

會發現 index.scss 的同目錄下出現一個檔案 index.scss.d.ts

檔案內容如下,裡面會幫你將所有的樣式名稱做 export

再回到 index.tsx 中,就會看見在 import Style 的地方警告消失了:

但每次都要重新編譯真的很麻煩,因此可以直接將 tsm 改成 watch 模式,只要在開發時固定開啟它就可以同步編譯了:

"scripts": {
  /* 其餘省略 */
  "tsm": "tsm src --watch"
},

執行後就會持續監聽專案中的 .SCSS 異動:

除此之外也可以設定編譯後的命名方式,例如:camel(駝峰命名法)、kebab(短橫線命名法)等等,都可以參考 官方 GitHub 的介紹。

本文的範例程式碼會提供在 GitHub 上,歡迎各位參考:)


結尾

此時在專案裡應該還是會有些地方出現 ESLint 的警告紅線,不過不要緊,那是因為現在 ESLint 對 TypeScript 還不熟,在下一篇讓我們替他倆拉起友誼的橋樑吧!

如果文章中有任何問題,或是不理解的地方,都可以留言告訴我!謝謝大家!


上一篇
Day27 | 最強聯名款 TSX 上市-Babel、Webpack、Jest 篇
下一篇
Day29 | 最強聯名款 TSX 上市-ESLint 篇
系列文
在 React 生態圈內打滾的一年 feat. TypeScript31

尚未有邦友留言

立即登入留言