Modify output of localIdentName / getLocalIdent

问题

I am developing a widget, which can be embedded on "any" website and using the css-loader to give my CSS-class unique names to avoid conflicts.

In my webpack.config.js I have the following line:

localIdentName: 'productname-[folder]-[local]',

This outputs classnames like:

productname-src-widgetbox
productname-Sidebar-sidebar

Is it possible to remove all "-src" from the classnames and lowercase everything?

I found a solution, where I just copied the whole original getLocalIdent() and prepended a replace() and toLowerCase() methods. But this is not a nice solution, I think:

const getLocalIdent = (loaderContext, localIdentName, localName, options) => {

  if (!options.context) {
    options.context = loaderContext.rootContext;
  }

  const request = path
    .relative(options.context, loaderContext.resourcePath)
    .replace(/\\/g, '/');

  options.content = `${options.hashPrefix + request}+${localName}`;

  localIdentName = localIdentName.replace(/\[local\]/gi, localName);

  const hash = loaderUtils.interpolateName(
    loaderContext,
    localIdentName,
    options
  );

  return hash
    .replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-')
    .replace(/^((-?[0-9])|--)/, '_$1')
    .replace("-src", "").toLowerCase();
};

回答1:

According to the docs for css-loader, you should be able to use the getLocalIdent to create your own custom class name.

Something like this might do what you're looking for

getLocalIdent: (context, localIdentName, localName, options) => {
  return localIdentName.replace("-src", "").toLowerCase();
},

If you'd like some inspiration, check out the default implementation of getLocalIdent.

来源：https://stackoverflow.com/questions/54679808/modify-output-of-localidentname-getlocalident

标签

reactjs

Webpack

webpack-style-loader

css-loader