Skip to main content

vite-react-extension

· 預估閱讀時間: 4 分鐘

繼上一次vite-react範本設定

這次要來擴充這個範本

作成我工作上習慣的配置環境

extension

  • sass / tailwindcss 3 / postcss
  • jest / storybook
  • husky
  • rxjs / observable-hooks
  • redux / redux-observable
  • axios-observable

首先拉上一次建好的範本再另外做一個擴充版本的範本

$ npx degit sayaku/reactSample viteReactTemplate

下載後進到資料夾

$ cd viteReactTemplate

install sass / tailwindcss 3 / postcss

首先安裝跟tailwindcss相關的依賴

$ yarn add sass tailwindcss postcss autoprefixer --dev

裝完後初始化tailwindcss與postcss的設定檔

$ npx tailwindcss init -p

這時目錄下會多兩個設定檔postcss.config.cjs, tailwindcss.config.cjs出來

兩個檔案需要變動如下

module.exports= {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

vite預設會去找有沒有符合postcss-load-config的檔案並且去套用它

符合postcss-load-config檔名與副檔名可參考:這裡

postcss的config裡關於tailwindcss如果沒特別設定,預設會去抓tailwindcss.config

也就是我們把vite給run起來的時候就會一起去跑postcss與tailwindcss的設定了

vite設定真的少很多(望向webpack還要寫一堆loader...)

預處理css的部分

vite預設有支援sass, 不用另外像webpack來裝sass的loader, 但vite要另外裝sass的依賴(所以我們上面先裝過sass了)

就算你不用sass, vite也預設支援postcss-importpostcss-nesting

讓你可以在css上import其他css以及在css裡面像sass那樣能寫巢狀css

這邊我們先去引入基本的tailwindcss

然後在App.tsx做一些class的修改(套用tailwindcss class)

@tailwind base;
@tailwind components;
@tailwind utilities;

接下來正式跑一下

$ yarn run dev

跑起來發現我們的tailwindcss都套用上去了

到這邊基本的style的部分都設定好了

jest / storybook