css - 如何从nuxt.js中的Assets文件夹导入CSS文件-6ren

css - 如何从nuxt.js中的Assets文件夹导入CSS文件

转载作者：行者123 更新时间：2023-12-03 06:43:54

<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吗？

最佳答案

您需要了解的第一件事是，您无法在任何地方，模板中，组件中，页面中也无处声明html头。

正确的位置位于nuxt.config.js中，在此文件中，您有一个名为head的属性，在此head中，您将配置导入。另一件事是，您不为此使用html标记，而是使用json模式。

看看https://nuxtjs.org/guide/configuration以获得更详细的解释。

现在您开始怀疑，如果您需要将CSS全局导入，则可以在nuxt.config.js内声明一个名为css的新属性，如下所示:

...  
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 - 如何从nuxt.js中的Assets文件夹导入CSS文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60278515/

文章推荐： javascript - Immer数据未在Vue中更新

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 如何从nuxt.js中的Assets文件夹导入CSS文件