javascript - 从 NUXT 中的“资产”目录加载所有 css 文件

Question

我想从我的 nuxt 项目的 assets 文件夹中加载几个 css 文件。

目前我正在通过单独加载文件nuxt.config.js

export default {
  head: {
     css: [
        '~/assets/css/fonts.css'
     ],
  }
}

这对于单个文件非常有效。有没有办法一次导入文件/assets/css夹中的所有文件？

标签： javascriptnuxt.js

Answer 1

我建议您使用另一种方法，您可以通过 sass 导入您的 css 或 scss 文件。

1. 在您的资产中创建一个名为scss:的文件夹/assets/scss/。
2. 通过运行以下命令安装import-glob-loader ：

npm install import-glob-loader --save-dev

3. assets/scss/在路径中创建一个文件调用它main.scss。打开main.scss并在其上添加此代码：

@import "imports/**/*";

3. assets/scss/在调用它时创建一个imports/包含所有 CSS 代码的文件夹。
4. assets/scss/imports在此路径中创建您的 css 文件。

5. 转到nuxt.config.js并在该文件中添加此代码：

 css: ['@/assets/scss/main.scss'],