1

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

但这不起作用。

我还为变量和 mixin 定义安装了 styled-resources 包，并且它在那里工作：

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

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

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

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

4

1 回答 1

2

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

作为实用程序输入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'),
于 2022-02-28T06:53:28.897 回答