如何从 nuxt.js 的 assets 文件夹中导入 css 文件答案

【问题标题】：How to import css file from assets folder in nuxt.js如何从 nuxt.js 的 assets 文件夹中导入 css 文件
【发布时间】：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。

标签： css vue.js nuxt.js

【解决方案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 解决方案，老实说，我认为这是一种更好的方法！