我正在开发一个小部件,可以嵌入“任何”网站,并使用css-loader为我的CSS类提供唯一的名称,以避免冲突。
在我的webpack.config.js中,我有以下行:
localIdentName: 'productname-[folder]-[local]',
这输出类名如:
是否可以从类名中删除所有“-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();
};
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
.