如何在nuxt.js中从assets文件夹导入css文件

Question

如何在nuxt.js中从assets文件夹导入css文件

cssvue.jsnuxt.js

11

<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的方法？

- obliviousfella

每个页面只能有一个 head 元素。它不能位于 body 中。除此之外，它可能会工作，但是指定路径上不存在 CSS。 - connexo

3个回答

4

尝试像这样在脚本中导入您的CSS文件：

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

/// 

</script>

编辑：将 ~ 改为 @

- Adrian A

现在我得到了这个错误：找不到模块“~assets/css/style-light.css”。 - obliviousfella

1

Use @/ instead of ~ - Adrian A

我得到了这个错误信息：无法解析“normalize.css”。 - obliviousfella

当然可以 @HenriqueVanKlaveren，看看这个 https://codesandbox.io/s/brave-bird-demc2?fontsize=14&hidenavigation=1&theme=dark。 - Adrian A

目前在Nuxt中使用head()函数会导致某些页面出现奇怪的故障，因此我改用这种方法，因为它百分之百地工作。感谢您的提示。 - RaisinBranCrunch

1

您可以使用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

- MailboxArsonist

我应该在什么情况下使用静态和资产？ - obliviousfella

我认为你放在资产文件夹中的CSS文件将由Webpack编译，因此，如果你使用任何预处理器，它将被转换为普通的CSS。使用静态文件夹，Webpack不会触及该文件夹中的任何内容。 - MailboxArsonist

如果我有一堆需要在特定页面加载的纯CSS文件，你会建议我使用哪个？ - obliviousfella

我想这真的取决于“一堆”有多少。这些文件已经被压缩了吗？这还取决于哪些文件将在特定页面上加载。如果代码量不是很大，并且已经被压缩，我认为将它们放入静态文件中不应该有问题。 - MailboxArsonist

你可能应该看一下Henriques的解决方案，老实说我认为那是更好的做法！ - MailboxArsonist

这是我发现的唯一可行的方法，如果您想将无法被作用域限定的CSS（例如，因为它适用于页面组件之外的某些内容，如<body>）包含到单个页面中，而不会在您切换页面时跟随您。 - giantpredatorymollusk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Henrique Van Klaveren · Accepted Answer

第一件事是，你需要知道的是，无论是在模板中、组件中还是页面中，都不能在任何地方声明html头部。

请记住，你不能使用html标签来实现这一点，你将使用json schema。

现在关于你是否想要全局导入CSS，正确的位置是在你的nuxt.config.js文件中，在这个文件中，有一个叫做head的属性，我们将在其中配置所有的导入项。

Nuxt2

https://v2.nuxt.com/docs/configuration-glossary/configuration-css/

所以，在nuxt.config.js中找到你的head部分，然后创建一个名为css的新属性，就像这样：

...
head: {
  css: [
    '~/assets/style/app.styl',
    '~/assets/style/main.css'
  ],
}
...

在Nuxt2中，你还需要在你的应用程序中安装一个CSS加载器，所以请确保你已经安装了"stylus"和"stylus-loader"。

[编辑] 添加nuxt3

Nuxt3

https://nuxt.com/docs/getting-started/styling#the-css-property

在nuxt3中，您可以在nuxt-config.ts文件中的head属性之外直接在css属性中导入。

export default defineNuxtConfig({
...
  css: [`assets/styles/main.scss`],
...
})

在Nuxt3中使用SCSS，你需要安装"sass"和"sass-loader"包，请确保在使用之前已经安装好了。

npm i D sass sass-loader

在组件内部导入

另一种方式是直接在组件或页面中导入您的css/scss。这适用于Nuxt2和Nuxt3的两个版本。您可以像这样做：

<style lang="scss" scoped>
@import "./myCustomCss.css";
</style>
    OR
<style scoped src="./myCustomCss.css">
</style>