如何从 nuxt.js 的 assets 文件夹中导入 css 文件
Posted
技术标签:
【中文标题】如何从 nuxt.js 的 assets 文件夹中导入 css 文件【英文标题】：How to import css file from assets folder in nuxt.js 【发布时间】：2020-06-02 08:00:34 【问题描述】：<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了吗？
【问题讨论】：
每页只能有一个head 元素。它不能驻留在body 中。除此之外，它可能会起作用，但该指定路径中不存在 CSS。
【参考方案1】：
您需要知道的第一件事是，您不能在任何地方声明 html 头，无论是在您的模板中，还是在您的组件中，无论是在您的页面中，还是在任何地方。
请记住，您不能为此使用 html 标签，您将使用 json 架构。
查看https://nuxtjs.org/guide/configuration 以获得更详细的说明。
现在你怀疑是否要全局导入 CSS，正确的位置是在你的 nuxt.config.js 中，在这个文件中，你有一个名为 head 的属性，在 head 中我们将配置所有导入.
所以，在 nuxt.config.js 中找到你的 head session，然后创建一个名为 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 加载器，因此请确保您已在应用程序中安装了“stylus”和“stylus-loader”。
【讨论】：
很有趣，你能帮我们试试这个吗？ 另外一件事，你有没有安装css loader？在这里我安装了这两个包：“stylus”：“^0.54.7”和“stylus-loader”：“^3.0.2”。【参考方案2】：尝试在脚本中导入你的 css 文件：
<script>
import "@/assets/css/style-light.css";
import "@/assets/css/login-light.css";
///
</script>
编辑：将 ~ 更改为 @
【讨论】：
现在我得到了这个找不到模块'~assets/css/style-light.css' 用@/代替~ 我得到了这个错误：无法解析'normalize.css' 当然可以@HenriqueVanKlaveren，看看这个codesandbox.io/s/… 现在在 Nuxt 中使用 head() 函数会导致我现在在某些页面上出现奇怪的失败，所以我改用这种方法，因为它 100% 的时间都在工作。谢谢你的提示。【参考方案3】：您可以像这样使用 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
【讨论】：
什么时候应该使用静态，什么时候应该使用资产？ 我认为你放入 assets 文件夹的 css 文件将由 webpack 编译，所以如果你使用任何预处理器，这将被转换为普通的旧 css。使用静态文件夹 webpack 不会触及此文件夹中的任何内容。 如果我有一堆纯 css 文件需要在特定页面中加载，您建议使用哪个？ 我想这真的取决于“一堆”有多少。这些文件是否已经缩小等。它还取决于将在某些页面上加载哪些文件。如果它不是大量的代码并且它已经被缩小了，我认为将它们放入静态文件中应该没有问题。 你可能应该看看 Henriques 解决方案，老实说，我认为这是一种更好的方法！以上是关于如何从 nuxt.js 的 assets 文件夹中导入 css 文件的主要内容，如果未能解决你的问题，请参考以下文章