Vue-loader: getLocalIdent option from css-loader doesn't work

[sqal]

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.

[LinusBorg]

We should close this issue as a wontfix for now, and put the change in loader matching strategies on the roadmap.

Agreed @squal?

[DaemonCahill]

I am having a similar problem where using single file components and css modules automatically appends an _0 to all generated classnames regardless of what I set the localIdentName to. It appears that there is no way to work around this other than to use an external src for the style being used as a module.

[Jinjiang]

@DaemonCahill maybe #1104 could help you.
Thanks.

[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.

[hungphongbk]

https://medium.com/@hngphong_44444/reducing-css-generated-by-vue-loader-by-using-classnames-shorten-trick-aa1d25d77473
Note that you must fork css-loader and edit by your own

[Yegorich555]

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.

Do we have any movements today?

[MitchTalmadge]

What's the current state of this, and what is blocking? Hopefully we can move this along.

[sqal]

@MitchTalmadge This issue was resolved a long time ago with release of vue-loader v15.0.0 :), read about the changes here https://vue-loader.vuejs.org/migrating.html#loader-inference

If you're using vue-cli you can easily configure css-loader's options for your needs in thevue.config.js like this:

module.exports = {
  css: {
    loaderOptions: {
      css: {
        modules: {
          getLocalIdent: () => {}
        },
      },
    }
  }
}