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

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

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 還是比較好啊！