修改localIdentName / getLocalIdent的输出

Question

我正在开发一个小部件，可以嵌入“任何”网站，并使用css-loader为我的CSS类提供唯一的名称，以避免冲突。

在我的webpack.config.js中，我有以下行：

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

这输出类名如：

• 产品名称-SRC-widgetbox
• 产品名称，侧边栏，侧边栏

是否可以从类名中删除所有“-src”并小写所有内容？

我找到了一个解决方案，我只是复制了整个原始的getLocalIdent（）并添加了一个replace（）和toLowerCase（）方法。但我认为这不是一个好的解决方案：

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();
};

Answer 1

According to the docs for css-loader，您应该能够使用getLocalIdent创建自己的自定义类名。

像这样的东西可能会做你想要的

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

如果你想要一些灵感，check out the default implementation of getLocalIdent.