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

Question

我在项目的Assets文件夹中存储了两个CSS框架，我以前将它们存储在静态文件夹中，并且一切正常。 但是，我决定将一些文件从静态文件切换到资产文件夹，并且在链接样式表时遇到麻烦。

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

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

但是，到目前为止，我所做的每一次尝试都导致“ / *样式未找到* /”页面。 资产文件夹中以及“ 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不会将Assets文件夹用作静态资源。 应该从中导入资源。 例如在您的组件内部

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

或通过postcss导入的内部样式

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

或通过nuxt配置中的css属性全局

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