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

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.

修改localIdentName / getLocalIdent的输出

1 个答案: