使用Tailwindcss+Vite+Pug+LESS 開發環境建置

|

本篇與上一篇使用Vitawind安裝Vite+Tailwindcss+Pug+LESS 開發環境建置 非常的雷同，但上一篇我們的主體是使用 [vitawind](https://vitawind-blog.vercel.app/) ，雖然很快、很便利，但有點遺憾的是vitawind 目前是使用 [Tailwindcss](https://tailwindcss.com/) 2 的版本，可是現在 [Tailwindcss 3](https://tailwindcss.com/) 已經推出好一陣子了，所以如果想用新版本的 Tailwindcss 還是得換個方式才行，但[ vite](https://vitejs.dev/) 真的不錯用，所以這篇我們就來看看怎麼在 [vite](https://vitejs.dev/) 下使用新版 [Tailwindcss](https://tailwindcss.com/) 吧！

1.建立 vite 專案目錄並切換到專案目錄

在terminal 終端機裡輸入以下指令：

  npm init vite 專案目錄
  cd專案目錄

2.安裝 Tailwindcss 與 Less 、 pug 、 vite-plugin-pug

在terminal 終端機裡輸入以下指令：

  npm install -D tailwindcss postcss autoprefixer less pug vite-plugin-pug

3.建立 Tailwindcss 相關設定檔

在terminal 終端機裡輸入以下指令：

  npx tailwindcss init -p

指令跑完後，你的專案資料夾就會多了「tailwind.config.js」和「postcss.config.js」兩個設定檔，打開tailwind.config.js 做以下修改：

  module.exports = {
  content: [
  "./index.html",
  "./src/*/.{vue,js,ts,jsx,tsx,pug}",
  ],
  theme: {
  extend: {},
  },
  plugins: [],
  }

因為我們要整合pug，所以記得要把pug加進去，你也可以設定其他的路徑放置pug檔，但建議還是放在src裡統一管理會比較好。

4.在css 裡引用 Tailwindcss

在src資料夾裡新增index.css，貼上以下程式碼：

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

接著在mai.js裡引入css：

  import { createApp } from 'vue 
  import App from './App.vue 
  import './index.css 
  createApp(App).mount('#app')

你可以在index.html 或 App.vue 裡試著使用Tailwindcss

  <h1 class="text-3xl font-bold underline"> Hello Tailwind! </h1>

在terminal 終端機裡輸入以下指令：

  npm run dev

如此一來就可以進入開發模式，你就可以在你的本機電腦上看到結果了。

5.less 與 pug 的運用

由於我平常習慣使用less + pug 來開發，所以這裡我也講一下怎麼設定less 與pug 的部份。首先我們先講Less的部份，由於我們使用vite的關係，Less 已經可以直接使用，只要在src資料夾中新增「ooo.less」的檔案，然後在main.js引入即可。pug的部份稍微麻煩一點，要打開vite.config.js，然後做以下修改：

  import { defineConfig } from 'vite 
  import vue from '@vitejs/plugin-vue 
  // pug
  import pugPlugin from "vite-plugin-pug"
  const options = { pretty: true } // FIXME: pug pretty is deprecated!
  const locals = { name: "My Pug" }
  // https://vitejs.dev/config/
  export default defineConfig({
  plugins: [vue(),pugPlugin(options, locals)]
  })

接著可以在src資料夾裡新增一個Pug檔，我們就先取名叫template.pug 吧！然後記得在裡面寫一些pug，如果你跟我一樣懶，那你可以複製下面的code：

  h1.text-green-500 Hello World
  p I'm a cool Vite project!

再來我們到index.html裡，在body 裡使用以下方式引用 pug 進入頁面。

  <pug src="./src/index.pug" />

在terminal 終端機裡輸入以下指令：

  npm run dev

進入開發模式，你就可以看到 less 與 pug 的成果。

6.開發與打包

開發指我們前面已經用過很多次，

在terminal 終端機裡輸入以下指令：

  npm run dev

就會進入開發模式，而輸出打包的指令是：

  npm run build

指令跑完後，你會發現多了一個「dist 」 資料夾，這個資料夾裡的東西就是你的開發結果喔！

結語

跟使用Vitawind安裝Vite+Tailwindcss+Pug+LESS 開發環境建置 相比，這篇的方法只多了一點點步驟，但卻可以使用最新的Tailwindcss ，後續使用方式其實也差不多，所以我比較建議用這個方法，雖然麻煩了一點點，但可以用新版Tailwindcss 還是比較好啊！