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

Question

我有几个CSS框架存储在我项目的assets文件夹中，我以前将它们放在静态文件夹中，一切正常。但是，我决定将一些文件从静态切换到assets文件夹，而我在链接样式表时遇到问题。

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

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

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

我试图使用以下链接为css：

“〜/资产/ CSS / materialize.css”

“〜资产/ CSS / materialize.css”

“@ /资产/ CSS / materialize.css”

“@资产/ CSS / materialize.css”

“资产/ CSS / materialize.css”

"/assets/CSS/materialize.CSS"

“css / materialize.css”（这是我在使用静态文件夹时用来链接的）

通过遵循源代码中的链接，每次尝试都会产生相同的“/ *样式未找到* /”页面。

这是组件的头部：

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

Answer 1

在头部，你应该只引用静态资源，例如外部的或静态文件夹中的那些。资产文件夹不是由nuxt作为静态资源提供的。它的资源应该被导入。例如在你的组件内

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

或者通过postcss导入内部样式

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

或者通过nuxt配置中的css property全局

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