Ошибка сборки с Nuxt 2.15.7 — не удается разрешить URL-адрес CSS @font-face

Я пытаюсь собрать свой проект, но в процессе сборки возникает ошибка. Я ввел эту команду:

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, я получаю эту ошибку. и мне пришлось заменить node-sass на 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;
  }
}

Пожалуйста, дайте мне подсказку. Спасибо!

Не могли бы вы также поделиться местом, где вы используете font-face + ваш файл nuxt.config.js?

kissu 14.05.2022 13:15

Error: Can't resolve '~/static/fonts/farsi/eot/iranyekanwebregular.eot' in '/Users/mohammadamin/WebstormProjects/TicaTeb/assets/css' указывает, что у вас может быть неверный путь к вашему файлу.

kissu 14.05.2022 20:09

Я использую шрифт в main.css.

Mohammad Amin Lotfi 14.05.2022 20:51

nuxt.config.js добавлен к моему вопросу.

Mohammad Amin Lotfi 14.05.2022 20:54

Что насчет моего второго комментария? Не могли бы вы также поделиться файлом CSS?

kissu 14.05.2022 21:48

Без проблем. Я добавил к вопросу.

Mohammad Amin Lotfi 15.05.2022 11:23

node-sass в любом случае старая и неэффективная версия.

kissu 15.05.2022 12:35

Ага. Я согласен с вами, и теперь я меняю его на sass.

Mohammad Amin Lotfi 15.05.2022 15:27

Но почему он не может разрешить URL-адрес CSS @font-face !?

Mohammad Amin Lotfi 15.05.2022 15:28
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
9
61
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Убедитесь, что ваши имена файлов и каталогов верны и совпадают. Дважды проверьте URL-адреса. Обратите внимание, что ОС на базе Unix чувствительны к регистру.https://www.informit.com/articles/article.aspx?p=1144082&seqNum=4#:~:text=Most%20Unix-style%20operating%20systems, существует%20in%20%20same%20folder

Другие вопросы по теме