<template>
<div class="container">
<head>
<link rel="stylesheet" href="~assets/css/style-light.css" />
<link rel="stylesheet" href="~assets/css/login-light.css" />
</head>
</div>
</template>
如上所述导入css会导致此错误
vue.runtime.esm.js:5717 GET http://localhost:3000/~assets/css/login-light.css net::ERR_ABORTED 404 (Not Found)
除了将整个CSS放入模板中,真的没有其他方法可以加载CSS吗?
尝试在这样的脚本中插入css文件:
<script>
import "@/assets/css/style-light.css";
import "@/assets/css/login-light.css";
///
</script>
编辑:更改为〜到@
您应该像这样使用head方法来引入文件:
head () {
return {
link: [
{ rel: 'stylesheet', href: '/style-light.css' },
{ rel: 'stylesheet', href: '/login-light.css' }
]
}
}
您还应该将这些css文件移动到静态文件夹中。在Vue论坛https://forum.vuejs.org/t/nuxt-import-css-file-and-js-file/42498上查看此讨论