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

Question

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

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

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

但是，到目前为止，我所做的每一次尝试都导致“ / *样式未找到* /”页面。资产文件夹中以及“ 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”（这是我在使用静态文件夹时用来链接的内容）

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

这是组件的头部：

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 property全局

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