Изменить вывод localIdentName / getLocalIdent

Question

Я занимаюсь разработкой виджета, который можно встроить на «любой» веб-сайт, и использую css-загрузчик, чтобы присвоить моему 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

Согласно документации для css-loader , вы должны иметь возможность использовать getLocalIdent для создания собственного имени класса.

Что-то подобное может делать то, что вы 'ищите

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

Если вам нужно вдохновение, проверьте реализацию по умолчанию getLocalIdent.