如何在 nuxt 项目的头部正确包含资产文件夹中的外部 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">
如何正确使用它
答案 0 :(得分: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