nuxt-module-build can't handle scss files

[hoersamu]

I noticed that importing scss styles works perfectly fine during dev and dev:preparebut causes an error when running prepack.

Reproduction: https://github.com/hoersamu/nuxt-module-scss-reproduction

Does anyone have a solution on how to handle scss in nuxt modules?

[pi0]

Hi. This is an upstream issue with mkdist since we started to support transpiling sass from vue scf files. You can track the fix here: unjs/mkdist#112

[hoersamu]

So the fix kinda works. I don't get the undefined variable Error anyone if i import the scss file directly in the style section of the components. Is there any way to get it to work with a global scss file containing all the variables? (Either by using nuxt.options.css or the vite css preprocessorOptions)

[pi0]

The upstream issue is fixed in latest mkdist release (you can try npm upgrade mkdist).

Is there any way to get it to work with a global scss file containing all the variables? (Either by using nuxt.options.css or the vite css preprocessorOptions)

Sure. You can alternatively put assets directly into assets directory of module and add it to the files: [] in package.json to ship without transform and inside module push to either nuxt options or vite.

[dvdmlln]

Hi,
I have a problem related to this issue. Using sass imports from an alias leads to an error:
https://github.com/dvdmlln/nuxt-module-scss-alias

prepack with module-builder 0.2.0 or dev works fine of course.

[pi0]

@dvdmlln Can you please open an upstream issue in https://github.com/unjs/mkdist if still having problem?

(closing this one since unjs/mkdist#109 is landed)

[rafaelmagalhaes]

Having a similar issue where when i try to build the module I get sass error can't find the variables but with dev:prepare and running the playground no problems

here's an example

https://stackblitz.com/edit/nuxt-starter-fkudyg?file=src/module.ts

[jenseo]

Hey @rafaelmagalhaes , did you ever find a solution to this? I'm in the same boat, where the vite preprocessorOptions does not seem to get picked up during build. Have not been able to find the solution so far

[rafaelmagalhaes]

Hey @jenseo nope, what I ended up doing was moving my SCSS to another project and installing it as a npm package