将文件夹中的所有css文件添加到nuxt.config [英] Add all CSS files in a folder to nuxt.config

问题描述

在我的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'],

但这不起作用。

我还安装了变量和混合定义的样式资源包，它在那里工作：

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

但documentation明确表示此处不包含样式：

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

我尝试执行的操作与样式资源中的警告所说的有什么不同？

推荐答案

css选项nuxt.config.js中的css选项需要一个文件数组，如果您不想手动逐个指定它们，只需创建如下所示的返回它们的函数

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'),

这篇关于将文件夹中的所有css文件添加到nuxt.config的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！