我正在开发一个小部件,可以嵌入到“任何”网站,并使用css-loader为我的CSS类分配唯一的名称以避免冲突。
在我的webpack.config.js中,我有以下代码:
localIdentName: 'productname-[folder]-[local]',
这会输出类名,如下所示:
- productname-src-widgetbox
- productname-Sidebar-sidebar
我已经找到了一个解决方案,即复制整个原始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();
};
localIdentName
和getLocalIdent
,其中localIdentName
是您上面所述的内容,然后使用getLocalIdent
函数来修改该名称。如果这不起作用,请尝试从getLocalIdent
中注销options
,看看您拥有哪些选项,以尝试生成所需的字符串。 - Adam