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

问题描述 投票:0回答:2
<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 vue.js nuxt.js
2个回答
0
投票

尝试在这样的脚本中插入css文件:

<script>
import "@/assets/css/style-light.css";
import "@/assets/css/login-light.css";

/// 

</script>

编辑:更改为〜到@


0
投票

您应该像这样使用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上查看此讨论

© www.soinside.com 2019 - 2024. All rights reserved.