Nuxt Linking CSS Files in Head property from assets issue答案

【问题标题】：Nuxt Linking CSS Files in Head property from assets issueNuxt Linking CSS Files in Head property from assets issue
【发布时间】：2021-03-15 14:19:28
【问题描述】：

我正在尝试通过仅在一个特定页面中使用 nuxt 的 head 属性来链接我的 css 文件，如下所示：

  head: {
    link: [
      {rel: 'stylesheet', href: require('~/assets/css/font.css')},
      {rel: 'stylesheet', href: require('~/assets/css/style.css')},
    ]
}

在我加载页面时执行此操作后一切正常，但我在控制台看到此错误 GET http://localhost:3000/[object%20Object] net::ERR_ABORTED 404（未找到）

当我查看源代码时，我发现 CSS 文件是这样链接的：

<link data-n-head="ssr" rel="stylesheet" href="[object Object]">
<link data-n-head="ssr" rel="stylesheet" href="[object Object]">

我需要以这种方式导入我的 CSS，但我仍然有这个问题，我该如何解决这个问题？

【问题讨论】：

remove require ... 像这样使用 {rel: 'stylesheet', href: '~/assets/css/font.css'},
如果我删除 require 样式将无法正确添加它不会那样工作
它会工作......你的资产和nuxt cofig在同一个文件夹中吗？
我在这里发布此问题之前尝试过，如果我删除 require 它将以这种方式链接：并且它不起作用

标签： vue.js vuejs2 nuxt.js nuxtjs

【解决方案1】：

如果您想调用 head 属性中的资产，您必须将其添加/移动到可公开访问的 /static 文件夹，然后明确引用它。此方法不会缩小文件。

head: {
  link: [
    {rel: 'stylesheet', type: 'text/css', href: '/css/font.css'},
    {rel: 'stylesheet', type: 'text/css', href: '/css/style.css'}
  ]
}

或者，您可以将其保留在原处，然后通过@import 在<style> 文件的<style> 标记之间将其导入，无需初始正斜杠。

<style scoped>
  @import url('~assets/css/font.css');
  @import url('~assets/css/style.css');
</style>

Source01 | Source02

【讨论】：