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

Я разрабатываю виджет, который можно встроить на «любой» веб-сайт и использовать css-загрузчик, чтобы присвоить моему CSS-классу уникальные имена, чтобы избежать конфликтов.

В моем webpack.config.js у меня есть следующая строка:

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

Это выводит имена классов, такие как:

  • productname-src-widgetbox
  • productname-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();
};

webpack reactjs css-loader webpack-style-loader
person rakete    schedule 13.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Что-то вроде этого может сделать то, что вы ищете

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

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

person Adam    schedule 13.02.2019
comment
Привет! Спасибо! Но я уже пробовал это... К сожалению, все мои классы теперь называются productname-[folder]-[local]. - person rakete; 14.02.2019
comment
Их можно использовать в сочетании друг с другом. Например, вы можете указать как localIdentName, так и getLocalIdent, где localIdentName — это то, что указано выше, а затем использовать функцию getLocalIdent для изменения этого имени. Если это не сработает, попробуйте выйти из системы options из getLocalIdent, чтобы посмотреть, какие у вас есть варианты, и попытаться сгенерировать предпочтительную строку. - person Adam; 14.02.2019