<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> Using PostCSS 官方文件
</aside>
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
<aside> <img src="/icons/folder_gray.svg" alt="/icons/folder_gray.svg" width="40px" /> ./ ├── .git/ └── .gitignore
目前為止的資料夾結構如上
</aside>
這邊記得先製作一個commit
git init & npm init 的部分則不在這個部分贅述
npm install -D tailwindcss postcss autoprefixer
其中的
-D
是npm install中的一個選項,是—-save-dev
的縮寫,如果有啟用這個設定的話則會安裝在devDependencies中,代表這個是開發中會使用到的套件而不是正式上線的時候使用的套件。
-webkit-min-device-pixel-ratio: 2
<aside> <img src="/icons/folder_gray.svg" alt="/icons/folder_gray.svg" width="40px" /> ./ ├── .git/ ├── .gitignore ├── node_modules/ ├── package-lock.json ├── package.json └── readme.md
目前為止的資料夾結構如上
</aside>
npm install -D ejs vite vite-plugin-ejs
npm install vite-plugin-live-reload glob gh-pages sass sass-loader
目前為止,在package.json中的內容如下
{
"devDependencies": {
"autoprefixer": "^10.4.16",
"ejs": "^3.1.9",
"postcss": "^8.4.30",
"tailwindcss": "^3.3.3",
"vite": "^4.4.9",
"vite-plugin-ejs": "^1.6.4"
},
"dependencies": {
"gh-pages": "^6.0.0",
"glob": "^10.3.7",
"sass": "^1.68.0",
"sass-loader": "^13.3.2",
"vite-plugin-live-reload": "^3.0.2"
}
}
以上套件的說明如下
autoprefixer
:
ejs
:
postcss
:
tailwindcss
:
vite
:
vite-plugin-ejs
:
在 "dependencies" 中的套件:
@tailwindcss/forms
:
gh-pages
:
glob
:
sass
和 sass-loader
:
vite-plugin-live-reload
:
回到package.json中,設定scripts的一些腳本如下
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"deploy": "vite build && gh-pages -d dist"
}
所以目前的package.json應該要長得像下面這樣
{
"name": "專案名稱",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"deploy": "vite build && gh-pages -d dist"
},
"devDependencies": {
"autoprefixer": "^10.4.15",
"ejs": "^3.1.9",
"postcss": "^8.4.28",
"tailwindcss": "^3.3.3",
"vite": "^4.2.0",
"vite-plugin-ejs": "^1.6.4"
},
"dependencies": {
"@tailwindcss/forms": "^0.5.4", //這個我在上面並沒有特別安裝,如果有需要再去tailwind官方查詢,有介紹到表單的套件
"gh-pages": "^5.0.0",
"glob": "^10.2.2",
"sass": "^1.61.0",
"sass-loader": "^13.2.2",
"vite-plugin-live-reload": "^3.0.2"
}
}
⚠️ 這邊需要注意!因為後續會使用到export default的es module語法,所以這邊一定要在package.json中設定"type": "module"
否則會跳以下的警告:To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
新增一隻vite.config.js檔案,寫入以下內容
import { defineConfig } from 'vite';
import { ViteEjsPlugin } from 'vite-plugin-ejs';
import { fileURLToPath } from 'node:url';
import path from 'node:path';
import { glob } from 'glob';
import liveReload from 'vite-plugin-live-reload';
function moveOutputPlugin() {
return {
name: 'move-output',
enforce: 'post',
apply: 'build',
async generateBundle(options, bundle) {
for (const fileName in bundle) {
if (fileName.startsWith('pages/')) {
const newFileName = fileName.slice('pages/'.length);
bundle[fileName].fileName = newFileName;
}
}
},
};
}
export default defineConfig({
// base 的寫法:
// base: '/Repository 的名稱/'
base: '/web-layout-training-vite/',
plugins: [
liveReload(['./layout/**/*.ejs', './pages/**/*.ejs', './pages/**/*.html']),
ViteEjsPlugin(),
moveOutputPlugin(),
],
server: {
// 啟動 server 時預設開啟的頁面
open: 'pages/index.html',
},
build: {
rollupOptions: {
input: Object.fromEntries(
glob
.sync('pages/**/*.html')
.map((file) => [
path.relative('pages', file.slice(0, file.length - path.extname(file).length)),
fileURLToPath(new URL(file, import.meta.url)),
])
),
},
outDir: 'dist',
},
});
<aside> <img src="/icons/folder_gray.svg" alt="/icons/folder_gray.svg" width="40px" /> ./ ├── .git/ ├── .gitignore ├── node_modules/ ├── package-lock.json ├── package.json ├── readme.md └── vite.config.js
目前為止的資料夾結構如上
</aside>
在官方文件中有提到,不管有沒有要使用postcss,都需要加上這個postcss.config.js檔案
並且將autoprefixer還有tailwindcss加入postcss.config.js這隻檔案
所以我們需要創建一個postcss.config.js檔案,並且寫入以下資料 (我們這邊不採用官方的module.exports的寫法,而是使用export default)
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
<aside> <img src="/icons/folder_gray.svg" alt="/icons/folder_gray.svg" width="40px" /> ./ ├── .git/ ├── .gitignore ├── node_modules/ ├── package-lock.json ├── package.json ├── postcss.config.js ├── readme.md └── vite.config.js
目前為止的資料夾結構如上
</aside>
新增一個tailwind.config.js,並且設定如下(這邊同樣不採用官方提供的module.exports的寫法,改用export default)
或是官方資料有寫到可以使用npx tailwindcss init
指令,會自動生成tailwind.config.js
<aside> 🔥 content 陣列的用途
</aside>
<aside> <img src="/icons/folder_gray.svg" alt="/icons/folder_gray.svg" width="40px" /> ./ ├── .git/ ├── .gitignore ├── node_modules/ ├── package-lock.json ├── package.json ├── postcss.config.js ├── readme.md ├── tailwind.config.js └── vite.config.js
目前為止的資料夾結構如上3
</aside>