修改 localIdentName / getLocalIdent 的输出

Question

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

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

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

这会输出如下类名：

• productname-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.