getLocalIdent option from css-loader doesn't work

In my webpack.config I have following setup:

function genStyleLoaders(_opts) {
  const opts = Object.assign({}, {
    styleLoader: 'style-loader',
    scss: false,
    cssModules: false,
  }, _opts || {});

  let loaders = [
    opts.styleLoader,
    {
      loader: 'css-loader',
      options: Object.assign({}, {
        minimize: env.__PROD__,
        importLoaders: 1,
        sourceMap: DEV,
        modules: opts.cssModules,
        getLocalIdent: (context, localIdentName, localName, options) => {
          return 'whatever_random_class_name';
        },
      }, CSS_MODULES_OPTS),
    },
    'postcss-loader',
  ];

  if (opts.scss) {
    loaders = loaders.concat({
      loader: 'sass-loader',
      options: Object.assign({}, plugins.sass, {
        sourceMap: DEV,
        sourceMapContents: DEV,
      }),
    });
  }

  return loaders;
}

// vue-loader rule
{
  test: /\.vue$/,
  loader: 'vue-loader',
  include: paths.appSrc,
  options: {
    loaders: {
      css: genStyleLoaders({
        styleLoader: 'vue-style-loader',
      }),
      scss: genStyleLoaders({
        styleLoader: 'vue-style-loader',
        scss: true,
      }),
    },
    cssModules: CSS_MODULES_OPTS,
  },
}

and basically when i import my styles through <style> block in .vue component

<style src="./Auth.scss" lang="scss" module></style>

all css classes starts with Auth prefix (Auth__card___3Q2YJ) when they should start with whatever_random_class_name. It works fine when I import styles in script tag:

import style from './Auth.scss';

export default {
  created() {
    this.$style = style;
  }
}

If i am not mistaken I think vue-loader simply doesn’t support this option right now? Would be great if vue-loader would support this option as well. Thanks 😃

[yyx990803]

This is because vue-loader loaders have to be stringified so the function option is dropped in the process. We will need to change the loader matching strategy to solve this, but for now unforunately there’s not an easy way to work around this.

[yyx990803]

Closing since this relies on some architectural re-design and currently webpack doesn’t have the ideal API for what we need.

I’ll try to work with the webpack team to see if they can make it possible.