Vue SFC vite.css.preprocessorOptions.scss.additionalData cannot run nuxt-module-build

[homersimpsons]

I'm writing a Nuxt Module, in this module I want to use <style> directly in my vue Single File Component.

I have some mixins, functions and variables defined in SCSS and I want to inject them in every <style> so I used the vite.css.preprocessorOptions.scss.additionalData:

extendViteConfig((config) => {
  config.css = defu(config.css || {}, { preprocessorOptions: { scss: { additionalData: '' } } });
  config.css.preprocessorOptions.scss.additionalData += '\n@import "src/assets/imports.scss";\n'
});

This works fine when I use nuxi dev playground, but it fails to compile with nuxt-module-build: SASS cannot find the declared variables / functions.

It looks like this is "expected" as nuxt-module-buidler does not instantiate the module, but I cannot seem to find any reference on how to register my additionalData.

I saw it was possible to write a build.config.ts with a defineBuildConfig but I was not able to find the correct options to use.

1. Is this behavior expected ?
2. How can I mimic / replace my module config with a build config so nuxt-module-buidler works ?

References:

• nuxt-module-build can't handle scss files #87
• https://github.com/unjs/mkdist
• https://github.com/unjs/unbuild

[ennioVisco]

You should look at the solution described here, which seem to address exactly your problem #90