如何在 nuxt 项目中包含外部 css 和 js

Question

如何在 nuxt 项目的头文件中正确包含 assets 文件夹中的外部 css。

这就是我正在做的事情，但是当我检查页面来源并访问 css 文件的链接时。它说没有找到样式。

这是在 nuxt.config.js 文件中

    head: {
  title: 'Happy Voyaging Project',
  htmlAttrs: {
    lang: 'en'
  },
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { hid: 'description', name: 'description', content: '' }
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    { rel:"stylesheet", type:"text/css", href:'~/assets/css/bootstrap.css' },
    { rel:"stylesheet", type:"text/css", href:'~/assets/css/font-awesome.css' },
    { rel:"stylesheet", type:"text/css", href:'~/assets/css/lineicons.css' },
    { rel:"stylesheet", type:"text/css", href:'~/assets/css/styles.css' },
    { rel:"stylesheet", type:"text/css", href:'~/assets/css/weather-icons.css' },
  ]
},

这就是我访问项目源时的样子

 <link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
<link data-n-head="ssr" rel="stylesheet" type="text/css" href="~/assets/css/bootstrap.css">
<link data-n-head="ssr" rel="stylesheet" type="text/css" href="~/assets/css/font-awesome.css">
<link data-n-head="ssr" rel="stylesheet" type="text/css" href="~/assets/css/lineicons.css">
<link data-n-head="ssr" rel="stylesheet" type="text/css" href="~/assets/css/styles.css">
<link data-n-head="ssr" rel="stylesheet" type="text/css" href="~/assets/css/weather-icons.css">

如何正确使用它

Answer 1

解决方案

要在 nuxt 中包含全局样式表，您必须在 nuxt 配置中使用 css 属性。

nuxt.config.js

export default {
  css: [
    '~/assets/css/bootstrap.css',
    ...
  ]
}

文档：https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-css

为什么您的样本不起作用

在构建期间，您的 nuxt 资产与 webpack 捆绑在一起，然后重命名为唯一名称以启用长期缓存。

虽然此路径~/assets/css/bootstrap.css 将指向您在本地文件系统中的文件。它不会在构建的应用程序路径中解析。它更可能看起来像这样/_nuxt/css/bootstrap.f092375.css。

如果您仍然希望它们是“外部的”（这可能会改变性能）

只需将您的 css 文件放入静态文件夹，然后路径将被保留。但它们不会捆绑在一起。

~/static/css/bootstrap.css => /css/bootstrap.css