vue.js - Nuxt 2.15.7 构建错误 - 无法解析 CSS @font-face URL

Question

我正在尝试构建我的项目，但在构建过程中出现错误。我输入了这个命令:

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;
  }
}

请给我一个提示。谢谢!

Answer 1

确保您的文件名和目录正确且匹配。仔细检查 URL。请注意，基于 Unix 的操作系统区分大小写。 https://www.informit.com/articles/article.aspx?p=1144082&seqNum=4#:~:text=Most%20Unix-style%20operating%20systems,exist%20in%20the%20same%20folder