将文件夹中的所有 CSS 个文件添加到 nuxt.config

Question

在我的 Nuxt 项目中，我有一个文件夹 assets/scss/globals/，其中包含许多应该全局包含的文件。

现在在我的 nuxt.config 文件中，我只能像这样手动包含每个文件：

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ['./assets/scss/globals/resets.scss'],

我需要的是这样的：

  css: ['./assets/scss/globals/*.scss'],

但这行不通。

我还为变量和混合定义安装了 styled-resources 包，它可以正常工作：

  styleResources: {
    scss: ['./assets/scss/variables/*.scss']
  },

但是 documentation 明确表示此处不包括样式:

不导入实际样式。仅使用此模块导入变量、混入、函数（等等），因为它们不会存在于实际构建中。导入实际样式会将它们包含在每个组件中，并且还会使您的 build/HMR 幅度变慢。不要这样做！

我尝试做的事情与 styled-resources 中的警告有什么不同吗？

Answer 1

CSS nuxt.config.js 中的选项需要一个文件数组，如果你不想一个一个地手动指定它们，你可以简单地创建一个 returns 它们的函数，如下所示

nuxt.config.js 中的函数或作为实用程序导入

const styleFiles = (path) => {
  const fs = require('fs')
  const files = fs.readdirSync(path)
  return files.map((i) => path + i)
}

然后像这样使用它

css: styleFiles('src/assets/scss/globals'),

Add all CSS files in a folder to nuxt.config