CSS Modules: Opt-in support?

[schjetne]

Hi!

I'm struggling to modify the utils.js file to enable CSS Modules opt-in support, as described here: https://vue-loader.vuejs.org/guide/css-modules.html#opt-in-usage

Has anyone done this? It looks to me like I will have to rewrite a lot to achieve this, but I might be overlooking something and I'm hoping someone can point me in the right direction.

Thank you!

And thank you for a wonderful system!

[schjetne]

Ok so I figured it out. Custom solution for my project (excerpt):

exports.styleLoaders = function(options) {
  const loaders = exports.cssLoaders(options)

  const scss = {
    test: /\.scss$/,
    oneOf: [
      {
        resourceQuery: /module/,
        use: loaders.scssModule,
      },
      {
        use: loaders.scss,
      },
    ],
  }

  return [scss]
}

But why in the world does the dev server seem to just skip all this altogether? I've been hacking away at this and I cannot figure out what to modify to get CSS Modules to work in the dev server's component preview.

[schjetne]

Well, that was weird. Turns out there's a separate Webpack config with style loaders in config/docs.config.js. Adding CSS module support in there solved it.