如何从nuxt.js中的assets文件夹导入css文件
如何从nuxt.js中的assets文件夹导入css文件
提问于 2020-02-18 10:16:47
<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的方法吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-02-18 12:38:37
你需要知道的第一件事是，你不能在任何地方声明一个html头，不能在你的tamplate中，也不能在你的组件中，也不能在你的页面中，也不能在任何地方。
请记住，您不能为此使用html标记，您将使用json模式。
有关更详细的解释，请查看https://nuxtjs.org/guide/configuration。
现在你怀疑你是否想要全局导入CSS，正确的位置是在你的nuxt.config.js中，在这个文件中，你有一个名为head的属性，在head中，我们将配置所有的导入。
因此，在nuxt.config.js中找到您的head会话，然后创建一个名为css的新属性，如下所示：
head: {
css: [
'~/assets/style/app.styl',
'~/assets/style/main.css'
],
}
...另一种方法是将css直接导入到组件中，为此，您可以这样做：
<style scoped>
@import '~/assets/style/main.css';
</style>
OR
<style scoped src="@/assets/styles/mystyles.css">
</style>在Nuxt中，你也需要在你的应用程序中安装一个CSS加载器，所以要确保你已经在你的应用程序中安装了一个“输入笔”和“输入笔加载器”。
Stack Overflow用户
发布于 2020-02-18 10:24:00
尝试将css文件导入到脚本中，如下所示：
<script>
import "@/assets/css/style-light.css";
import "@/assets/css/login-light.css";
///
</script>编辑:将~更改为@
Stack Overflow用户
发布于 2020-02-18 10:39:17
您可以使用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上查看此讨论
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60278515
复制相关文章
点击加载更多
相似问题
从assets文件夹编译/导入文件
如何从assets文件夹导入多个图像
从assets文件夹导入文件(自己的.ext)
从Assets文件夹加载CSS JS
Android:从css调用assets文件夹
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
