Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

getLocalIdent option from css-loader doesn't work #734

Closed
sqal opened this issue Mar 23, 2017 · 9 comments
Closed

getLocalIdent option from css-loader doesn't work #734

sqal opened this issue Mar 23, 2017 · 9 comments

Comments

@sqal
Copy link
Contributor

@sqal sqal commented Mar 23, 2017

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 comment has been minimized.

Copy link
Member

@yyx990803 yyx990803 commented Apr 6, 2017

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

This comment has been minimized.

Copy link
Member

@LinusBorg LinusBorg commented Apr 8, 2017

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

Agreed @Squal?

@DaemonCahill

This comment has been minimized.

Copy link

@DaemonCahill DaemonCahill commented May 18, 2017

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

This comment has been minimized.

Copy link
Member

@Jinjiang Jinjiang commented Jan 17, 2018

@DaemonCahill maybe #1104 could help you.
Thanks.

@yyx990803

This comment has been minimized.

Copy link
Member

@yyx990803 yyx990803 commented Mar 6, 2018

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.

@yyx990803 yyx990803 closed this Mar 6, 2018
@hungphongbk

This comment has been minimized.

@Yegorich555

This comment has been minimized.

Copy link

@Yegorich555 Yegorich555 commented Jul 9, 2019

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

This comment has been minimized.

Copy link

@MitchTalmadge MitchTalmadge commented Oct 10, 2019

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

@sqal

This comment has been minimized.

Copy link
Contributor Author

@sqal sqal commented Oct 10, 2019

@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: () => {}
        },
      },
    }
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants
You can’t perform that action at this time.