修改 localIdentName / getLocalIdent 的输出结果

Question

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

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

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

这会输出类名，如下所示:

• productname-src-widgetbox
• productname-Sidebar-sidebar

请问能否删除所有类名中的“-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();
};

- rakete

Answer 1

根据css-loader的文档，您可以使用getLocalIdent创建自定义类名。以下示例可能会达到您想要的效果：

（文档链接）

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

如果您需要一些灵感，请查看 getLocalIdent 的默认实现。

- Adam

---

嗨！谢谢！但我已经尝试过了...不幸的是，现在我的所有类都叫做productname-[folder]-[local]。 - rakete

它们可以一起使用。例如，您可以同时指定 localIdentName 和 getLocalIdent，其中 localIdentName 是您上面所述的内容，然后使用 getLocalIdent 函数来修改该名称。如果这不起作用，请尝试从 getLocalIdent 中注销 options，看看您拥有哪些选项，以尝试生成所需的字符串。 - Adam