javascript - 如何在本地导入Vue/Nuxt.js中的CSS框架？

Question

我的元素的 asset 文件夹中存储了几个 CSS 框架，我之前将它们放在 static 文件夹中，一切都工作正常。但是，我决定将一些文件从静态文件夹切换到 Assets 文件夹，但我在链接样式表时遇到了问题。

在assets文件夹中，有一个名为“css”的文件夹，我在其中存储了所有框架。

我的目标是将框架链接到组件文件夹中依赖于它们的组件。之前，如前所述，样式表位于静态文件夹中并且工作正常。

但是，到目前为止我所做的每一次尝试都会导致“/* style not found */”页面。这些图像也位于 Assets 文件夹中名为“img”的文件夹中，工作正常。

我尝试使用以下 CSS 链接:

“~/assets/css/materialize.css”

“~assets/css/materialize.css”

“@/assets/css/materialize.css”

“@assets/css/materialize.css”

“ Assets /css/materialize.css”

“/assets/css/materialize.css”

“css/materialize.css”(这就是我在使用静态文件夹时用来链接的内容)

通过源代码中的链接，每次尝试都会导致相同的“/* style not found */”页面。

这是组件的头部:

head:{  
   link:[  
      {  
         rel:'stylesheet',
         type:'text/css',
         href:'~assets/css/materialize.css'
      }
   ]
}

Answer 1

在 head 中，您应该仅引用静态资源，例如外部的或静态文件夹中的。 nuxt 不将 Assets 文件夹作为静态资源提供。应该从中导入资源。例如在你的组件内

import "~/assets/css/materialize.css"

或者通过 postcss import 内部样式

  <style>
    @import '~assets/css/materialize.css'
  </style>

或者通过 css property 全局访问在 nuxt 配置中

export default {
  css: [
    '~/assets/css/materialize.css'
  ]
}