Add all CSS files in a folder to nuxt.config

Question

In my Nuxt project I have a folder assets/scss/globals/ with a lot of files which should be globally included.

Now in my nuxt.config file I can only include each file by manually like so:

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

What I would need is something like this:

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

But this doesn't work.

I have the styled-resources package installed as well for variable and mixin definition and there it works:

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

But the documentation clearly says to not include styles here:

Do not import actual styles. Use this module only to import variables, mixins, functions (et cetera) as they won't exist in the actual build. Importing actual styles will include them in every component and will also make your build/HMR magnitudes slower. Do not do this!

Is what I try to do any different from what the warning in styled-resources says?

Answer 1

CSS option in nuxt.config.js requires an array of files, If you do not want to specify them manually one by one you can simply create a function that returns them like below

Function in nuxt.config.js or import as a util

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

Then use it like so

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