Option to disable sass compilation

[dvdmlln]

Hi,

I've build a module containing custom components along with global sass variables with default values. A project that uses this module can overwrite the default sass values and the module components use the new values.
However with module-builder ^0.2.1 sass is compiled to css and the former sass variables are now fixed values.
So for now I use fixed version 0.2.0 or did I miss a option to disable sass compilation?

Best regards,
David

[ennioVisco]

Any news about this? Looks like the upstream issues have been solved!

[ennioVisco]

Should be available since unjs/mkdist#152 has been merged in [email protected], although an issue on it has been opened last week (unjs/mkdist#182). Let's see how that evolves, and if everything checks we'll tag the devs here :)

[ennioVisco]

@guibulator let's keep the discussion here, I think you can close the issue on mkdist.

@danielroe would you kindly 🙏 bump the mkdist version and allow us to exclude sass from the builder like in https://github.com/wd-4000/mkdist/blob/22515607be5b47b9f065fa41a3fc8ca297b125af/src/loaders/index.ts (that has been accepted in [email protected] via unjs/mkdist#152)?

[danielroe]

@ennioVisco We now have the latest mkdist version - do you need anything else, or do you think we can close this?

[ennioVisco]

@ennioVisco We now have the latest mkdist version - do you need anything else, or do you think we can close this?

Unfortunately, I think there is still a missing step: we need to be able to specify the loaders to use (or, to tell nuxt-module-builder to not pick the sass loader. Check this comment that should clarify the issue: unjs/mkdist#182 (comment)

[pi0]

Sorry for late response.

This is how you can customize loaders:

// build.config.ts (in root of your module project)
import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
  hooks: {
    'mkdist:entry:options' (_ctx, _entry, opts) {
      opts.loaders = ['js', 'vue'] // Default: ['js', 'vue', 'sass', 'postcss']
    }
  }
})

I guess we can make it easier (unjs/unbuild#361 and unjs/mkdist#194) and also documented for nuxt module builder.

[ennioVisco]

Sorry for late response.

This is how you can customize loaders:

// build.config.ts (in root of your module project)
import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
  hooks: {
    'mkdist:entry:options' (_ctx, _entry, opts) {
      opts.loaders = ['js', 'vue'] // Default: ['js', 'vue', 'sass', 'postcss']
    }
  }
})

I guess we can make it easier (unjs/unbuild#361 and unjs/mkdist#194) and also documented for nuxt module builder.

Sweet, thanks a lot!!
Unfortunately, this still requires to have a full understanding of how unbuild is used in module-builder, which is not really straightforward, but perhaps @danielroe can help on providing that option directly from module-builder's api?

[pi0]

module-builder is essentially a preset for unbuild. That's what I meant we need to better document how they related and work together :)

[ennioVisco]

Sorry for late response.

This is how you can customize loaders:

// build.config.ts (in root of your module project)
import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
  hooks: {
    'mkdist:entry:options' (_ctx, _entry, opts) {
      opts.loaders = ['js', 'vue'] // Default: ['js', 'vue', 'sass', 'postcss']
    }
  }
})

I guess we can make it easier (unjs/unbuild#361 and unjs/mkdist#194) and also documented for nuxt module builder.

If someone stumbles upon this issue, I didn't get from pi0's reply that this actually can be added ON TOP of module-builder's build.config.ts, as it is actually written in the first comment of the code block. (And, it does solve the issue!)

Then, how /whenunbuild is able to work while chaining these build.config.ts files, is really magic for me and it would be very appreciated if this neat feature was documented a bit.