修改 localIdentName / getLocalIdent 的输出

Question

我正在开发一个小部件，它可以嵌入 "any" 网站并使用 css-loader 给我的 CSS-class 唯一名称以避免冲突。

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

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

这会输出 class 名称，例如：

产品名称-src-widgetbox
产品名称-侧边栏-侧边栏

是否可以从 class 名称中删除所有“-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])|--)/, '_')
    .replace("-src", "").toLowerCase();
};

Answer 1

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

像这样的东西可能会满足您的需求

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

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

修改 localIdentName / getLocalIdent 的输出

Modify output of localIdentName / getLocalIdent

reactjs

webpack

webpack-style-loader

css-loader