我最近开始了一个使用
npm create vite@latest my-project -- -- template react
的项目,如Vite指南中所述。到目前为止,我在本地主机上运行的开发项目进展顺利。然而,当我现在尝试在 Vercel 中部署它时,一些 TailwindCSS 样式以及一些图像没有被实现。
例如:
src\assets\css\login.css
#app-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
.content {
@apply flex items-center justify-center;
grid-column: auto;
grid-row: auto;
background-image: url('../images/backgrounds/techno-blue-hexagonal-wave.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
.login-container {
@apply justify-center w-full px-4;
.col {
@apply rounded-md py-4;
background-color: rgba(0, 0, 0, 0.5);
.logo {
@apply mt-3 mb-4 mx-auto w-2/3;
}
.form-group {
@apply px-4 mx-auto;
.form-label {
@apply text-text font-mono text-sm;
}
.form-control {
@apply font-mono;
}
}
.btn-submit {
@apply text-text font-bold mx-auto mt-8 block px-10;
background-color: #0d6efd;
}
}
}
}
}
@media (min-width: 1200px) {
.login-container {
.form-group {
@apply px-0;
width: 90%;
}
}
}
当我将其部署在 Vercel 中时,具有
@apply
Tailwind 样式的样式并未实现。以及 background-image: url('../images/backgrounds/techno-blue-hexagonal-wave.jpg');
,其中图像位于除 assets
之外的同一 /assets/images
文件夹中。以下是我在 TailwindCSS 指南中遵循的 TailwindCSS 和 PostCSS 的配置。
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./index.html',
'./src/**/*.{js,jsx,ts,tsx}',
'./src/pages/**/*.{js,jsx,ts,tsx}',
'./src/components/**/*.{js,jsx,ts,tsx}',
],
theme: {
colors: {
primary: '#2a2a2a',
'primary-rgb': '42, 42, 42',
secondary: '#39ff14',
'secondary-rgb': '57, 255, 20',
tertiary: '#2ed610',
'tertiary-rgb': '46, 214, 16',
accent: '#ff0000',
'accent-rgb': '255, 0, 0',
background: '#1e1e1e',
'background-rgb': '30, 30, 30',
text: '#f5f5f5',
'text-rgb': '245, 245, 245',
danger: '#dc3545'
},
fontFamily: {
serif: ['EB Garamond', 'serif'],
sans: ['Neuton', 'sans-serif'],
mono: ['Courier Prime', 'monospace'],
cursive: ['Dancing Script', 'cursive'],
},
extend: {},
},
plugins: [],
};
postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
},
};
package.json
{
"name": "myproject",
"private": true,
"version": "1.0.0",
"description": "Something.",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"repository": {
"type": "git",
"url": "git-repo"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.6.0",
"@fortawesome/free-brands-svg-icons": "^6.6.0",
"@fortawesome/free-regular-svg-icons": "^6.6.0",
"@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/react-fontawesome": "^0.2.2",
"@lordicon/react": "^1.10.0",
"aos": "^2.3.4",
"axios": "^1.7.7",
"js-cookie": "^3.0.5",
"lottie-web": "^5.12.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.53.1",
"react-router-dom": "^6.26.2",
"react-scroll": "^1.9.0",
"react-svg": "^16.1.34",
"sweetalert2": "^11.14.2"
},
"devDependencies": {
"@eslint/js": "^9.11.1",
"@types/node": "^22.7.5",
"@types/react": "^18.3.10",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.2",
"autoprefixer": "^10.4.20",
"cssnano": "^7.0.6",
"eslint": "^9.11.1",
"eslint-plugin-react": "^7.37.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.12",
"globals": "^15.9.0",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.13",
"vite": "^5.4.8"
}
}
对于我可能出错的地方或者我是否遗漏了什么有什么想法吗?我的 css 位于
src\assets\css\
文件夹中,我使用的图像位于 src\assets\images\
文件夹中。我希望有人能帮忙。
在 CSS 文件的顶部,您需要导入 Tailwind 的指令。
/* login.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* The rest of your CSS code */
Tailwind 文档说:
将 Tailwind 指令添加到您的 CSS
将 Tailwind 每个层的 @tailwind 指令添加到您的 主要 CSS 文件。