我正在尝试构建我的项目，但在构建过程中出现错误。我输入了这个命令:
yarn build
然后我看到了这个:
ERROR in ./assets/css/main.css (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./assets/css/main.css)
Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '~/static/fonts/farsi/eot/iranyekanwebregular.eot' in '/Users/mohammadamin/WebstormProjects/TicaTeb/assets/css'
at /Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/enhanced-resolve/lib/Resolver.js:209:21
at /Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
at /Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at /Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
at /Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:672:1)
at /Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/enhanced-resolve/lib/AliasPlugin.js:67:43
at /Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
at /Users/mohammadamin/WebstormProjects/TicaTeb/node_modules/enhanced-resolve/lib/Resolver.js:285:5
@ ./assets/css/main.css 4:14-217
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
我必须提到项目在 Windows 10 上成功构建，但是当我在 MacBook Air M1 上输入构建命令时出现此错误。我不得不用 sass 替换 node-sass 因为 node-sass 与 M1 不兼容
我尝试了不同的方法，例如将 ~assets/fonts 替换为 ~/static/fonts 或只是/font/... 但它们都失败了。
这是我的 package.json:
{
"name": "TicaTeb-Front",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"@nuxt/postcss8": "^1.1.3",
"@nuxtjs/axios": "^5.13.6",
"@nuxtjs/i18n": "^7.2.0",
"cookie-universal-nuxt": "^2.1.5",
"core-js": "^3.15.1",
"jalali-moment": "^3.3.11",
"nuxt": "^2.15.7",
"v-mask": "^2.3.0",
"vue-js-modal": "^2.0.1",
"vue-toasted": "^1.1.28",
"vue2-touch-events": "^3.2.2",
"vuelidate": "^0.7.6"
},
"devDependencies": {
"@nuxtjs/color-mode": "^2.1.1",
"@nuxtjs/pwa": "^3.3.5",
"@nuxtjs/tailwindcss": "^4.2.1",
"autoprefixer": "^10.4.7",
"sass": "~1.32.6",
"sass-loader": "10.1.1",
"tailwindcss-dir": "^4.0.0"
}
}
这是我的 nuxt.config.js:
import i18nOptions from './plugins/i18n/options.js'
export default {
// Target: https://go.nuxtjs.dev/config-target
target: 'server',
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'TicaTeb | تیکاطب',
htmlAttrs: {
type: 'text/html; charset=utf-8'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ itemprop: 'name', content: 'TicaTeb' },
{ property: 'og:type', content: 'website' },
{ property: 'og:site_name', content: 'ticateb.ir' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'theme-color', content: '#0048C5' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'@/assets/css/main.css',
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'~/plugins/i18n/i18n.js',
'~/plugins/hybridLink.js',
'~plugins/vue-js-modal.js',
'~plugins/vue2-touch-events.js',
'~/plugins/vuelidate.js',
'~/plugins/englishDigit.js',
'~/plugins/decimalPlaces.js',
'~/plugins/preventLeadingZeroes.js',
{ src: '~/plugins/toasted.js', mode: 'client' },
{ src: '~/plugins/vueMask.js', mode: 'client' },
],
router: {
middleware: ['i18n']
},
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
'@nuxt/postcss8',
'@nuxtjs/tailwindcss',
'@nuxtjs/color-mode',
'@nuxtjs/pwa'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
['@nuxtjs/i18n', i18nOptions],
'@nuxtjs/axios',
'cookie-universal-nuxt'
],
colorMode: {
preference: 'dark', // default value of $colorMode.preference
fallback: '', // fallback value if not system preference found
hid: 'nuxt-color-mode-script',
globalName: '__NUXT_COLOR_MODE__',
componentName: 'ColorScheme',
classSuffix: '',
storageKey: 'Theme'
},
loading: {
color: '#0048C5',
height: '4px',
rtl: true,
throttle: 0
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
pwa: {
manifest: {
name: 'تیکاطب تفسیر آنلاین آزمایش',
short_name: 'تیکاطب',
lang: 'fa',
display: 'standalone',
theme_color: '#0048C5',
background_color: '#ffffff',
},
icon: {
fileName: 'TicaTebLogo.png',
sizes: [64, 120, 144, 152, 192, 384, 512]
}
}
}
这是 main.css:
@font-face {
font-family: iranyekan;
font-style: normal;
font-weight: normal;
src: url('~/static/fonts/farsi/eot/iranyekanwebregular.eot');
src: url('~/static/fonts/farsi/eot/iranyekanwebregular.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('~/static/fonts/farsi/woff/iranyekanwebregular.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('~/static/fonts/farsi/woff2/iranyekanwebregular.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('~/static/fonts/farsi/ttf/iranyekanwebregular.ttf') format('truetype');
}
@font-face {
font-family: iranyekan;
font-style: normal;
font-weight: 500;
src: url('~/static/fonts/farsi/eot/iranyekanwebmedium.eot');
src: url('~/static/fonts/farsi/eot/iranyekanwebmedium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('~/static/fonts/farsi/woff/iranyekanwebmedium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('~/static/fonts/farsi/woff2/iranyekanwebmedium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('~/static/fonts/farsi/ttf/iranyekanwebmedium.ttf') format('truetype');
}
@font-face {
font-family: iranyekan;
font-style: normal;
font-weight: bold;
src: url('~/static/fonts/farsi/eot/iranyekanwebbold.eot');
src: url('~/static/fonts/farsi/eot/iranyekanwebbold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('~/static/fonts/farsi/woff/iranyekanwebbold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('~/static/fonts/farsi/woff2/iranyekanwebbold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('~/static/fonts/farsi/ttf/iranyekanwebbold.ttf') format('truetype');
}
@font-face {
font-family: iranyekan;
font-style: normal;
font-weight: 800;
src: url('~/static/fonts/farsi/eot/iranyekanwebextrabold.eot');
src: url('~/static/fonts/farsi/eot/iranyekanwebextrabold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('~/static/fonts/farsi/woff/iranyekanwebextrabold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('~/static/fonts/farsi/woff2/iranyekanwebextrabold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('~/static/fonts/farsi/ttf/iranyekanwebextrabold.ttf') format('truetype');
}
.page-enter-active,
.page-leave-active {
transition: all 250ms ease-out;
}
.page-enter,
.page-leave-active {
opacity: 0;
transform-origin: 50% 50%;
}
@tailwind base;
@layer base {
html {
font-family: iranyekan, serif !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
}
@tailwind components;
@layer components {
.text-title {
@apply text-gray-dark dark:text-white
}
.hero-card {
background: radial-gradient(circle farthest-side, #0e74b3 1%, #0048C5 75%);
}
.card-box {
@apply bg-white dark:bg-black-800 rounded-10
}
.hero-button, .hero-button-reverse, .service-button {
background-image: linear-gradient(to right, #044DCC, #257FE1);
z-index: 1;
@apply relative transition-all duration-300
}
.hero-button-reverse {
background-image: linear-gradient(to right, #257FE1, #044DCC);
}
.service-button {
background-image: linear-gradient(to bottom right, #257FE1, #0048C5);
}
.hero-button::before, .hero-button-reverse::before, .service-button::before {
content: "";
background: linear-gradient(to right, #FF6B00, #FF974B);
z-index: -1;
@apply absolute inset-0 transition-all duration-300 opacity-0 rounded-12
}
.hero-button:hover {
@apply translate-x-[20px]
}
.hero-button-reverse:hover {
@apply translate-x-[-20px]
}
.service-button:hover {
@apply translate-y-[-8px]
}
.hero-button:hover::before, .hero-button-reverse:hover::before, .service-button:hover::before {
@apply opacity-100
}
.custom-input {
@apply relative
}
.custom-input label {
@apply absolute top-[-12px] rtl:right-[30px] ltr:left-[30px] text-title z-20 bg-white dark:bg-black-800 px-[4px] text-[16px]
}
.custom-input div {
@apply bg-transparent border border-[0.6px] rounded-5 w-full
}
.custom-input div input {
@apply bg-transparent text-title px-16 py-[13px] text-[14px] w-full outline-none
}
.red-dot {
@apply bg-red w-[6px] h-[6px] rounded-full min-w-[6px]
}
.custom-radio {
@apply flex items-center;
}
.custom-radio input[type="radio"]:focus {
@apply outline-none rounded-full;
}
.custom-radio input[type="radio"] {
@apply cursor-pointer w-16 h-16 min-w-[16px] relative appearance-none rounded-full mx-8;
}
.custom-radio input[type="radio"]::before {
content: '';
border: 1px solid #7580A0;
@apply absolute inset-0 rounded-full;
}
.custom-radio input[type="radio"]:focus::before {
@apply shadow-none;
}
.custom-radio input[type="radio"]:checked::before {
border: 5px solid;
@apply border-[#1F2434] dark:border-[#ffffff];
}
.custom-radio label {
@layer text-title;
@apply text-[14px] mb-0 align-middle text-center self-center cursor-pointer select-none;
}
.btn-primary {
@apply flex items-center justify-center bg-primary-dark rounded-5 w-full text-white font-bold text-[16px] py-[10px] transition-all duration-200 hover:bg-[#FF6B00]
}
.btn-secondary {
@apply flex items-center justify-center bg-gray-dark rounded-5 w-full text-white font-bold text-[16px] py-[10px] transition-all duration-200 hover:bg-gray-light
}
}
@tailwind utilities;
@layer utilities {
.dir-rtl {
direction: rtl !important;
}
.dir-ltr {
direction: ltr !important;
}
}
请给我一个提示。谢谢!
最佳答案
确保您的文件名和目录正确且匹配。仔细检查 URL。请注意，基于 Unix 的操作系统区分大小写。 https://www.informit.com/articles/article.aspx?p=1144082&seqNum=4#:~:text=Most%20Unix-style%20operating%20systems,exist%20in%20the%20same%20folder
关于vue.js - Nuxt 2.15.7 构建错误 - 无法解析 CSS @font-face URL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72239511/