2

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?

Dollique
  • 952
  • 2
  • 10
  • 29

1 Answers1

4

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'),
UdithIshara
  • 405
  • 3
  • 7
  • Thanks, I added the path as a parameter and had to map through the array to add it to each element, but now it works: `const styleFiles = (path) => { const fs = require('fs') const files = fs.readdirSync(path) return files.map(i => path + i) }` – Dollique Feb 28 '22 at 18:01
  • 1
    Nice!, I'll update the answer with your code for anyone else that might stumble upon this – UdithIshara Feb 28 '22 at 18:06
  • I am getting this error when trying to do this in my project: `Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.` Any thoughts? I am using Nuxt 3, which has a `nuxt.config.ts` file instead of `.js`. – Falcon Stakepool Jul 26 '23 at 02:07